功夫码

js做一个简单的进度条的代码实例

晓峰 时间:2019-09-28 21:58:07 阅读:15
--------------------------------------------------------- Ta 只分享的内容开始 ---------------------------------------------------------------------

js做一个简单的进度条的代码实例

用原生js做进度条,布局非常简单,一个盒子里放一个span标签,让它的宽度为0,并且转成块元素。

主要用定时器动态增加span的宽度,并且当它的宽度大于父级盒子的宽度的时候停止

效果如下:

全部代码如下如下:

   *{
        margin: 0;
        padding: 0;
    }
        #box{
            width: 500px;
            height: 30px;
            margin: 50px auto;
            overflow: hidden;
            border: 1px solid #CCCCCC;
            border-radius: 15px;
        }
         
        span{
            height: 30px;
            width: 0;
            display: block;
            line-height: 30px;
            background: red;
            text-indent: 250px;
            color: #000;
             
        }
    </style>
</head>
<body>
<div id="box">
    <span id="bar"></span>
</div>

<!-- js代码如下 -->

<script>
//获取dom元素
var obar=document.getElementById("bar");
//定义一个定时器,因为后面要清除我们给它命名
    var timer=setInterval(function(){
//速度为3,匀速,也可以利用随机数函数让速度随机
        var speed=3;
//设置退出条件,当span的宽度大于盒子超出就清除定时器
        if(obar.offsetWidth>=500){
            clearInterval(timer);
        }else{
//条件不满足时我们span的宽度为当前宽度加速度
            obar.style.width=speed+obar.offsetWidth+"px"
//由于浮点数误差,这边我们乘以一百再取整。
            obar.innerHTML=parseInt(obar.offsetWidth/500*100)+"%"
        }
    },30)
</script>
--------------------------------------------------------- Ta 只分享了这些内容 ---------------------------------------------------------------------

本文来源:功夫码(gongfuma.com)
声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有。
未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

回到顶部