html 使用js中dom对象与计时器实现点击“启动“执行，点击“停止“停止

最新推荐文章于 2022-07-10 11:12:00 发布

雁迟

最新推荐文章于 2022-07-10 11:12:00 发布

阅读量726

点赞数

分类专栏：大前端文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_51311218/article/details/112306616

版权

大前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

使用中dom对象与计时器实现点击"启动"执行，点击"停止"停止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用dom对象与计时器实现点击"启动"执行，点击"停止"停止</title>
    <script>
        // 接收setInterval的返回值
        var time;
        // 时间初始化
        var num = 0;
        // 启动定时器
        function start(){
            stop();
            time = setInterval(function(){
                document.getElementById("t1").innerHTML = num++;
            },1000)  
        }
        
        // 暂停定时器
        function stop(){
            clearInterval(time);
        }


    </script>
</head>
<body>
    <!-- 使用a标签实现 -->
    <a href="javascript:start()">启动</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:stop()">停止</a><br><hr>

    <!-- 使用事件和按钮实现 -->
    <button onclick="start()">启动</button>&nbsp;&nbsp;&nbsp;
    <button onclick="stop()">停止</button><br>

    <div id = "t1"></div>
</body>
</html>

雁迟

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
html 使用js中dom对象与计时器实现点击“启动“执行，点击“停止“停止

使用中dom对象与计时器实现点击"启动"执行，点击"停止"停止<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用dom对象与计时器实现点击"启动"执行，点击"停止"停止</
复制链接

扫一扫