码迷,mamicode.com
首页 > 编程语言 > 详细

day27—JavaScript实现定时器及其应用案例

时间:2018-04-16 19:50:07      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:second   star   bsp   分享图片   script   hello   info   ESS   点击   

转行学开发,代码100天——2018-04-12

 

JavaScript中定时器有两种,分别是setInterval和setTimeout;其用法如下:

开启:

 setTimeout("function",time) 设置一个超时对象;延迟执行;只执行一次

setInterval("function",time) 设置一个超时对象;连续执行;重复执行

 

*上述两种方法,均有返回值,即改定时器对象。该对象可作为关闭对象输入。

关闭:

clearTimeout(对象) 清除已设置的setTimeout对象 
clearInterval(对象) 清除已设置的setInterval对象 

如window对象的开启及关闭

var timer = window.setInterval(express,millseconds);

window.clearInterval(timer);

var timer = window.setTimeout(express,millseconds);
window.clearTimeout(timer);

 

定时器启停用例:

设置两个按钮,分别控制定时器的开启和关闭

<input type="button" name="start" id="btn1" value="start">
<input type="button" name="stop" id="btn2" value="stop">

JavaScript实现定时器的启停控制

<script type="text/javascript">
         //定时器用法
        // var timer = window.setInterval(express,millseconds);window.clearInterval(timer);
        //     var timer = window.setTimeout(express,millseconds);
        //     window.clearTimeout(timer);
        window.onload = function () {
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            var timer = null;

            btn1.onclick =function(){

                timer =setInterval(function()
                {
                  alert("hello");        
                },1000);
            };

            btn2.onclick = function(){
                clearInterval(timer);
            };
            
        }
    </script>

技术分享图片

点击“start”按钮,每隔一秒弹出提示框“hello”,即定时器开启;点击“stop”按钮,提示框不再弹出,即定时器关闭。

 

day27—JavaScript实现定时器及其应用案例

标签:second   star   bsp   分享图片   script   hello   info   ESS   点击   

原文地址:https://www.cnblogs.com/allencxw/p/8858062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!