• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

js事件监控setInterval用法和实例

JavaScript web前端中文站 1年前 (2018-04-12) 942次浏览 已收录 0个评论

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

js 事件监控 setInterval 用法和实例

setInterval底层原理

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

更多精彩内容请看 web 前端中文站
http://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;作者:阮一峰)


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:js 事件监控 setInterval 用法和实例
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址