【JavaScript】计时器

1、计时器

-> 开启计时器

number window.setInterval(callback, millisecond);

每隔制定毫秒后调用一次回调函数，返回一个ID

-> 关闭计时器

window.clearInterval(intervalId);

例子1：显示现在时间

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
	
        //页面一开始加载就显示实现，然后每隔一秒钟更新一次时间
        onload = function () {
            window.date.innerHTML = new Date().toLocaleString();
			setInterval(function(){
                window.date.innerHTML = new Date().toLocaleString();
            }, 1000);
        };
    </script>
</head>
<body>
    <p>现在时刻：<span id="date"></span></p>
</body>
</html>

效果：

例子2：点击停止时间停止，点击开始时间开始

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        alert(Number(false));

        // 页面一开始加载就显示实现，然后每隔一秒钟更新一次时间
        // alert(Math.random().toString().substr(2));

        /*
        onload = function () {
            window.date.innerHTML = new Date().toLocaleString();

            var intervalId = setInterval(function () {
                window.date.innerHTML = new Date().toLocaleString();
            }, 1000);

            document.getElementById("btn").onclick = function () {
                if (this.value == "点击停止") {
                    // 就是要停止
                    clearInterval(intervalId);
                    this.value = "点击开始";
                } else {
                    // 就是要开始
                    intervalId = setInterval(function () {
                        window.date.innerHTML = new Date().toLocaleString();
                    }, 1000);
                    this.value = "点击停止";
                }

            };
        };
        */

        onload = function () {
            window.date.innerHTML = new Date().toLocaleString();
            var isRun = true;
            var intervalId = setInterval(function () {
                if (isRun) {
                    window.date.innerHTML = new Date().toLocaleString();
                }
            }, 1000);

            document.getElementById("btn").onclick = function () {
                // if (arguments[0].button != 0) return;
                /*
                if (this.value == "点击停止") {
                    // 就是要停止
                    isRun = !isRun;
                    this.value = "点击开始";
                } else {
                    // 就是要开始
                    isRun = !isRun;
                    this.value = "点击停止";
                }
                */
                isRun = !isRun;
                this.value = "点击" + "开始,停止".split(',')[Number(isRun)];
            };
        };
    </script>
</head>
<body>
    <p>现在时刻：<span id="date"></span></p><br />
    <input type="button" name="name" value="点击停止" id="btn" />
</body>
</html>

效果：

2、延时器

-> 等待制定时间再来执行代码，语法与计时器类似，但是只执行一次
-> 开启

number window.setTimeout(callback, millisecond);

等待制定时间调用回调函数，注意只会执行一次，返回的是延时器id
-> 关闭

clearTimeout(timeoutId);

【JavaScript】计时器

猜你喜欢