JS中的定时器和循环定时器以及简单的页面倒计时案例

本文将介绍定时器 setTimeout 的三种调用方式，会介绍取消定时器 clearTimeout ，会介绍循环定时器 setInterval 以及取消循环定时器 clearInterval

1. 定时器：setInterval

        //1. setTimeout("JS语句"，在多少毫秒数后调用JS语句)
        setTimeout("console.log('hhhh')", 1000);

        //setTimeout(函数，在多少毫秒数后调用该函数)
        setTimeout(function () {
            console.log("ahhahhahahh");
        }, 2000);

        //setTimeout(函数名，在多少毫秒数后调用该函数)
        setTimeout(say, 3000);
        function say() {
            console.log(345678);
        }

2. 取消定时器：clearTimeout

        //取消定时器clearTimeout，在定时器没执行之前取消定时器
        var fp = setTimeout("console.log('你好');", 1000);
        clearTimeout(fp);

3. 循环定时器：setInterval

        //循环定时器setInterval
        var fp2 = setInterval(function () {
            console.log("啊哈哈哈哈哈哈哈");
        }, 1000);

4. 取消循环定时器：clearInterval

<button id="stop">取消循环</button>

        //取消循环定时器clearInterval
        document.getElementById("stop").onclick = function () {
            clearInterval(fp2)
        }

5. 页面倒计时：

    <span style="color: red;" id="_time"></span>
    <input type="button" value="开始时间" onclick="_starttime()">
    <input type="button" value="停止时间" onclick="_stoptime()">

        var interval_id = window.setInterval("_setTime()", 1000);

        //若不加windows.onload 方法，在页面中不能显示时间
        window.onload = function () {
            var _time = document.getElementById("_time");
            var date = new Date();
            _time.innerHTML = date.toLocaleString();
        }

        //若注释掉这个方法，控制台会报这个错误：_setTime is not defined
        function _setTime() {
            var _time = document.getElementById("_time");
            var date = new Date();
            _time.innerHTML = date.toLocaleString();
        }

        //单击事件
        function _starttime() {
            interval_id = window.setInterval("_setTime()", 1000);
        }

        //单击事件
        function _stoptime() {
            window.clearInterval(interval_id);

        }