在我们之前我们为大家介绍了JavaScript实现进度条的方法,原生实现进度条,那么如何控制进度条?JS控制进度条用到的元素比较简单,就一个p标签内嵌一个span标签即可,外面那层p做背景,内部那层span做动态进度显示,由JS控制。
整体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>JS控制进度条</title> <style type="text/css"> body { height:30px; width:330px; background-color:blue; } #ProgressBarBackgroundOne { background:url(ProgressBk.png) no-repeat 0 center; height:10px; width:300px; } #ProgressBarOne { background:url(ProgressFt.png) no-repeat 0 center; height:10px; width:0%; display:block; } #ProgressBarBackgroundTwo { background-color:White; height:10px; width:300px; } #ProgressBarTwo { background-color:Gray; height:10px; width:0%; display:block; } </style> <script type="text/javascript"> var numOne = 0; var numTwo = 0; function SetProgressOne() { var ProgressOne = document.getElementById('ProgressBarOne'); if (numOne < 100) { numOne = numOne + 1; } ProgressOne.setAttribute('style', 'width:' + numOne + '%'); setTimeout(SetProgressOne, 500); } function SetProgressTwo() { var ProgressTwo = document.getElementById('ProgressBarTwo'); if (numTwo < 100) { numTwo = numTwo + 1; } ProgressTwo.setAttribute('style', 'width:' + numTwo + '%'); setTimeout(SetProgressTwo, 500); } </script> </head> <body> <p id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></p> <p id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></p> </body> <script type="text/javascript"> SetProgressOne(); SetProgressTwo(); </script> </html>
为了方便显示,我就直接在html文档里把css文本和js脚本写了出来,这是原生js控制进度条方式,另外也可以使用Node.js或mootools之类的js库来编写。
SetProgressOne()是使用了图片来进行进度显示;SetProgressTwo()则是使用了颜色进行进度显示,原理上都是一样,都是通过JS控制span标签的属性:style="width:预设值%"即可。在表现上,使用图片就比使用颜色要好一些,因为使用颜色不好处理圆角,并不是所有浏览器都支持CSS的圆角属性,下面是效果对比:
总结:
通过本文的详细学习,相信小伙伴们对JavaScript控制进度条有了进一步的了解,希望对你的工作有所帮助!
相关推荐:
以上就是JavaScript控制进度条的实例分析的详细内容,更多请关注php中文网其它相关文章!
已抢66068个
抢已抢33861个
抢已抢18800个
抢已抢9287个
抢已抢12114个
抢已抢25590个
抢