js事件监控setInterval用法和实例

在学习JavaScript过程中,我们除了对基础知识有一定了解理解之外,还需要从底层去认识部分函数的用法及其效果。

setInterval底层原理

setInterval底层原理

下面我们主要学习js事件监控setInterval函数,以及举一个简单的监控实例,帮助大家理解研究。

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

? ? ? ?定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

? ? ? ?语法

setInterval(code,millisec[,”lang”])

? ? ? ?返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

? ? ? ? 实例运用

下面是html的主要代码,大家可以下载下来研究实践下。

 <script>
 window.onload = function(){
     screenfunction();
     }
 function screenfunction(){
     var blackcolor = document.getElementById("blackScreen");
     var timer = 0; //定时时间
     var _timer = 0;
     var gotime = 0; //经过的时间
     var timerparam = 5;
 
     console.log("123");

     //1秒监控一次 /*www.lisa33xiaoq.net*/
     timer = setInterval(function(){
       //console.log(gotime);
  
       if(gotime >= timerparam){
       blackcolor.style.display = 'block';
       clearInterval(timer);
     }
     gotime ++;
     }, 1000);
 
     //鼠标按下,恢复原样
     document.onmousedown = function(event){
     blackcolor.style.display = 'none';
     }
 
     document.onmouseup = function(event){
        gotime = 0;
        _timer = setInterval(function(){ 
        if(gotime >= timerparam){
        blackcolor.style.display = 'block';
        clearInterval(_timer);
     }
     gotime ++;
     }, 1000);
   }
 }
</script>

在线演示

 

百度网盘下载 ? ? ?密码:i4em

 

web前端中文站点评:

在学习web前端,要注意基础知识的牢固掌握,这样我们才能在运用中游刃有余。细节很重要,大家有兴趣可以参考JavaScript 标准参考教程(英文标题:JavaScript Standards Reference Guide;作者:阮一峰)

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到