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

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

5. 页面倒计时:

    
    
    

        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);

        }

你可能感兴趣的:(javascript,vscode,html)