本文主要是介绍简单的进度条,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<div class="progressBar"><div id="bar"></div></div>css样式.progressBar{width: 200px;height: 8px;border: 1px solid #98AFB7;border-radius: 5px;margin-top: 10px;}#bar{width: 0px;height: 8px;border-radius: 5px;background: #5EC4EA;}js代码progressBar()function progressBar (){//初始化js进度条$("#bar").css("width","0px");//进度条的速度,越小越快var speed = 20;bar = setInterval(function(){nowWidth = parseInt($("#bar").width());if(nowWidth <= 200){barWidth = (nowWidth + 1)+"px";$("#bar").css("width" , barWidth);}else{//进度条读满之后,停止clearInterval(bar);}},speed)}
这篇关于简单的进度条的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!