简易实现进度条（bootstrap）以及jquery的setInterval方法,加了效果的进度条（静态条纹，动态条纹，层叠效果）

最新推荐文章于 2021-12-26 09:55:08 发布

嘘 -你听

最新推荐文章于 2021-12-26 09:55:08 发布

阅读量554

点赞数 1

本文链接：https://blog.csdn.net/weixin_44657829/article/details/106051697

版权

java 同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

bootstrap

2 篇文章 0 订阅

订阅专栏

加载成功使用BootStrap框架简单实现进度条功能；用到了jquery的setInterval方法

serInterval的语法：
setInterval(code,millisec[,"lang"]);
setInterval() 方法会不停地调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
</head>
<body>
<div class="progress">

<!--    <div id="doing" class="progress-bar progress-bar-danger  progress-bar-striped " >-->
<!--    <div id="doing"class="progress-bar progress-bar-success progress-bar-striped">-->
<!--    <div id="doing"class="progress-bar progress-bar-info progress-bar-striped">-->
<!--    <div id="doing"class="progress-bar progress-bar-primary progress-bar-striped">-->
    <div id="doing"class="progress-bar progress-bar-warning progress-bar-striped">
   
        Loading...
    </div>
</div>
<p>层叠效果</p>
<hr>
<div class="progress">

<div  class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
</div>
</div>



</body>
<script>
    var doing = document.getElementById('doing');
    var i =0;
    var kiss =setInterval(function () {
            i++;
            doing.style.width=i+'%';
            if(i==100){
                clearInterval(kiss)
                doing.innerText='Success!'
            }
        }
        ,1000)//加载时间的单位ms
</script>
</html>

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

嘘 -你听

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简易实现进度条（bootstrap）以及jquery的setInterval方法,加了效果的进度条（静态条纹，动态条纹，层叠效果）

加载成功使用BootStrap框架简单实现进度条功能；用到了jquery的setInterval方法serInterval的语法：setInterval(code,millisec[,"lang"]);setInterval() 方法会不停地调用函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title
复制链接

扫一扫