JS——计数器介绍及setinterval()案例


计数器方法:setInterval()、setTimeout()方法 及 clearInterval()、clearTimeout()方法

简单介绍:

(1)setInterval()和clearInterval():

setInterval():周期性地调用一个函数(function)或者执行一段代码。

clearInterval()取消掉用setInterval设置的重复执行动作。

(2)setTimeout()和clearTimeout():

setTimeout():在指定的延迟时间之后调用一个函数或者执行一个代码片段。
clearTimeout():方法可取消由 setTimeout() 方法设置的 timeout。

详细介绍见链接:https://segmentfault.com/a/1190000002475127

 

下面显示简单的setInterval()方法的案例:

显示效果如下图所示:

详细代码如下图:

代码讲解:

第20-22行代码:获取元素div及input、设置变量clearTime为null(用于存放后面的计数器方法)。

第25行代码:把setInterval计数器存入变量clearTime中;当点击第一个按钮,启动计数器方法,让div不停地执行向右移动的运动。

 第30行代码:当点击第二个按钮,执行clearInterval()方法,清除存入到变量clearTime中的setInterval计数器方法,让div暂停向右的运动。

 

检测clearTime变量的值:(第31行代码)

clearTime输出为:第25行代码setInterval的计数器方法进行的次数;   因为clearTime变量是在外部定义的,所以在31行代码函数内部访问的到clearTime的内容


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM