用户注册



邮箱:

密码:

用户登录


邮箱:

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

发表随想


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

计时器、bootstrap进度条

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

[html]代码库

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>租借自行车</title>
    <meta name="viewport" content="width=devic-width, initial-scale=1">
    <link href="../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../css/style.css" rel="stylesheet"/>
</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>

            <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">开锁中 40%</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/jquery-2.1.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<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%
        }, progressTime * 1000);
    }
</script>
</html>


分享到:
更多

网友评论    (发表评论)


发表评论:

评论须知:

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