JavaScript定时器作业

JavaScript定时器作业

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定时器练习</title>
</head>
<body>
<input id="i1" type="text">
<input id="start" type="button" value="开始">
<input id="stop" type="button" value="停止">
<script>

    // 声明一个全局的t,保存定时器的ID
    var t;
    // 在input框里显示当前时间
    // 1. 获取当前时间
    function foo() {
        var now = new Date();//获取时间
        var nowStr = now.toLocaleString();
        // 2. 把时间字符串填到input框里
        var i1Ele = document.getElementById("i1");
        i1Ele.value = nowStr; //将值传到该位置，将在页面i1上显示
    }


    // 点开始让时间动起来
    // 找到开始按钮,给它绑定事件
    var startButton = document.getElementById("start");  //取id
    startButton.onclick=function () {
        foo();//先执行，就不会有停滞
        // 每隔一秒钟执行foo
        if (t===undefined){ //能保证只有一个定时器，如果t不是undefined说明已经有定时器了，还没有清除
            t = setInterval(foo, 1000); // 把定时器的ID复制给之前声明的全局变量t
        }
    };
    // 点停止
    // 找到停止按钮,给它绑定事件
    var stopButton = document.getElementById("stop");
    stopButton.onclick=function () {
        // 清除之前设置的定时器
        clearInterval(t); // 清除t对应的那个定时器, t的值还在， 清除！清除！
        console.log(t);
        t = undefined; //重置，可以下次在设置定时器
    }

</script>
</body>
</html>

 

效果：

 

posted on 2019-01-02 18:29  嘟嘟嘟啦  阅读(274)  评论(0)  编辑  收藏  举报

导航