<%@ page contentType= "text/html;charset=UTF-8" language= "java" %> |
<%@ taglib uri= "http://java.sun.com/jsp/jstl/core" prefix= "c" %> |
<html> |
<head> |
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> |
<meta name= "viewport" content= "width=device-width,initial-scale=1,maximum-scale=1.0" /> |
<title>租借自行车</title> |
<!-- 引入 Bootstrap --> |
<link href= "${pageContext.request.contextPath}/css/bootstrap.min.css" rel= "stylesheet" > |
<!-- 引入自定义css --> |
<link href= "${pageContext.request.contextPath}/css/style.css" rel= "stylesheet" > |
<!-- jQuery --> |
<script src= "${pageContext.request.contextPath}/js/jquery.min.js" ></script> |
<!-- 包括所有已编译的插件 --> |
<script src= "${pageContext.request.contextPath}/js/bootstrap.min.js" ></script> |
</head> |
<body class = "rent" > |
<div class = "container" > |
<div class = "row" > |
<div class = "col-sm-4 col-sm-offset-4 " > |
<br><br><br><br><br><br><br><br><br><br><br><br> |
<c:choose> |
<c:when test= "${index== '11'}" > |
<div class = "progress progress-striped active" > |
<div class = "progress-bar progress-bar-success" id= "progressId" role= "progressbar" |
aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 0%;" > |
<span id= "tip" >开锁中 0 %</span> |
</div> |
</div> |
<script> |
var progress = 0 ; |
var progressTime = 120 ; //定时器时间(s) |
var progressPerSecond = Number( 100 / progressTime.toFixed( 1 )); //进度条每秒增加的长度 |
var progressTimer = setInterval(function () { |
progressBar() |
}, 1000 ); |
clearProgress(); |
//进度进度控制 |
function progressBarControl(progressParam) { |
$( "#progressId" ).css( "width" , progressParam + "%" ); |
$( "#tip" ).text( "开锁中 " + progressParam + "%" ); |
} |
//进度条定时器 |
function progressBar() { |
progress += progressPerSecond; |
var progressRound = Math.round(progress); |
progressBarControl(progressRound); |
} |
//120s后,清除进度条定时器 |
function clearProgress() { |
setTimeout(function () { |
clearInterval(progressTimer); |
progressBarControl( 100 ); //进度条进度100% |
window.location.href = "${pageContext.request.contextPath }/rent/bike.do?bikeNo=" + "${bike.bikeNo}" ; |
}, progressTime * 1000 ); |
} |
</script> |
</c:when> |
<c:otherwise> |
<div class = "text-danger" > |
<h4><b>租借自行车失败,错误代号:${index},原因:${desc}。</b></h4> |
</div> |
</c:otherwise> |
</c:choose> |
</div> |
</div> |
</div> |
</body> |
</html> |
by: 发表于:2017-12-26 10:40:54 顶(0) | 踩(0) 回复
??
回复评论