简洁的原生js百分比进度条效果

1、新建html文档。

2、书写hmtl代码。

<!-- 代码部分begin -->

<div class="lanren">

<div id="bar" style="width:1%;"></div>

</div>

    <div class="lanren">简洁的原生js百分比进度条效果</div>

    <!-- 代码部分end -->

3、书写css代码。

<style>

*{margin:0;padding:0;list-style:none;}

.lanren{width: 450px; border: 1px solid #2BB7E4; height: 25px;margin:100px auto;}

#bar{ display: block;background: #2BB7E4; float: left; height: 100%;text-align: center;line-height: 25px; color: #FFF;} 

</style>

4、书写并添加js代码。

<script>

function $(d){

return document.getElementById(d);

}

function smation(){ 

$("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; 

$("bar").innerHTML = $("bar").style.width; 

if($("bar").style.width == "100%"){ 

window.clearInterval(bar); 

}

} 

var bar = setInterval(function(){

smation();

}, 50);; 

window.onload = function(){ bar;} 

</script>

5、代码整体结构。

6、查看效果。