JavaScript定时器作业

最新推荐文章于 2023-04-30 13:59:02 发布

weixin_30325793

最新推荐文章于 2023-04-30 13:59:02 发布

阅读量82

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/112358nizhipeng/p/10210442.html

版权

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>

效果：

转载于:https://www.cnblogs.com/112358nizhipeng/p/10210442.html

weixin_30325793

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript定时器作业

JavaScript定时器作业<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>定时器练习</title></head><body><input id="i1...
复制链接

扫一扫