jQuery进度条设置

最新推荐文章于 2024-07-29 03:39:25 发布

weixin_30713953

最新推荐文章于 2024-07-29 03:39:25 发布

阅读量321

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/caodneg7/p/9647951.html

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

<div class="container">
    <div class="progress">
      <div id="p1" class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 2%;">
        0%
      </div>
    </div>

    <button id="i1" class="btn btn-success">起飞！</button>
</div>


<script src="jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
    var x=0;
    var t;
    function setWidth(){
        if (x<100){
            x += 1;
            $("#p1").css("width", x+"%").text(x+"%");
        } else {
            // 进度条走完要停止定时器
            clearInterval(t);
        }
    }
    $("#i1").click(function () {
        t = setInterval(setWidth, 100)
    });
</script>
</body>
</html>

转载于:https://www.cnblogs.com/caodneg7/p/9647951.html