基于定时器实现进度条功能的javascript示例

本文通过一个实例说明javascript实现了基于定时器的进度条功能。分享给大家参考，如下：

Javascript中的计时器

窗口级别以下的window.setInterval()方法启动计时器

1.setInterval(函数、时间(函数执行的频率，以毫秒为单位))

重复一次操作

2.setTimeout用于在执行操作之前延迟一段时间

Settimeout(函数，时间)，settimeout不会重复！

停止计时器

SetTimeoout对应于清除set setTiemout对象的清除超时(对象)

SetInterval对应于clearInterval(对象)来清除设置的setInterval对象

举个例子：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www . JB 51 . net js进度条/title style type=' text/CSS ' # outer/* outer */{ margin-top :100 px；border:solid固体黑色1px背景-颜色：白色；宽度width:1004pxheight:54px} # inner/* inner */{ background-color : red；宽度：0 px；/*首先将内部宽度设置为0，使用show()实现进度条！*/height :50 px；边距-left :2 px；margin-top :2 px；}/style script language=' JavaScript '函数show () {if (document。getelementbyid ('inner ')。offsetwidth1000)//offsetwidth实现时没有宽度，但是style.width实现时有宽度(px)！{ document . getelementbyid(' inner '). style . width=document . getelementbyid(' inner ')。偏移20 ' px//每次执行show()函数，宽度都会增加20！console . log(document . getelementbyid(' inner '). style . width)；//console console:可以在网页上看到宽度的变化(使用F12)} else { document . getelementbyid(' inner ')。style.width=1000 ' px//如果大于1000px，只能给边框宽度赋1000 px；stop()；//此时应执行定时器停止功能！}}var计时器；//是在两个函数外定义的，因为两个函数都会用到！函数start(){ timeer=window . setinterval(show，200)；//每200ms调用show函数}函数stop(){ timer=window . clear interval(timer)；}/script/head body on load=' start()' div id=' outer ' div id=' inner '/div/div/body/html运行效果：

运行程序时会加载网页上的进度条，加载的速度和时间有关！

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。