JavaScript中的定时事件

这两个函数都是在给定的时间之后开始执行的，并不是立即执行。

var timeId = window.setTimeout("method()",1000);　　//定时执行，还可以这么写var timeId = window.setTimeout(method,1000);

window.clearTimeout(timeId);　　//清除已设置的setTimeout对象

var timeId = window.setInterval("method()",1000);　　//定时循环执行，同样的还可以这么写var timeId = window.setInterval(method,1000);

window.clearInterval(timeId);　　//清除已设置的setInterval对象

定时事件示例代码：

<html> 
    <head> 
        <title>定时事件实现倒计时</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script> 
    </head> 
    <body> 
        <div> 
            <input type="button" value="点下我" id="btn" onclick="show();" /> 
        </div> 
    </body>
    <script type="text/javascript"> 
        var nn = 30; 
        var tipId; 
        function show() { 
            tipId = window.setInterval("start()", 1000); //每隔1秒调用一次start()方法 
        } 

        function start() { 
            if (nn > 0) { 
                var vv = "倒计时(" + nn + ")"; 
                $("#btn").attr("disabled", "disabled"); //使按钮不能被点击 
                $("#btn").attr("value", vv); //更改按钮上的文字 
                nn--; 
            } else { 
                nn = 30; 
                $("#btn").removeAttr("disabled"); //使按钮能够被点击 
                $("#btn").attr("value", "点下我"); //更改按钮上的文字 
                window.clearInterval(tipId); //清除循环事件 
            } 
        } 
    </script>
</html>

 

posted @ 2017-04-22 17:39  一线大码  Views(690)  Comments(0)  Edit  收藏  举报