用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - jsp代码库

计时器、bootstrap进度条rent.jsp

2017-03-08 作者:知行合一心举报

[jsp]代码库

<%@ 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>


分享到:
更多

网友评论    (发表评论)

共1 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。