JavaScript-可控制的时钟（定时器）

最新推荐文章于 2020-08-09 15:10:02 发布

Liutonglin

最新推荐文章于 2020-08-09 15:10:02 发布

阅读量845

点赞数

分类专栏：前端学习笔记文章标签： js

本文链接：https://blog.csdn.net/qq_40757071/article/details/82784848

版权

学习笔记同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        页面上有输出内容的地方
        有两个按钮 开始 暂停
        1.页面上的时钟会动
        2.开始暂停
    -->
    <script>
        var timer;
        window.onload = function(){
            //1.1页面加载后才有div
            //1.2 设置定时器 定时调用某个函数
            timer = setInterval(show , 1000);
            //1.4 手动调用一次show 初始化第一次的数据
            show();
        }

        function show(){
            //1.3 获得div设置时间 需要覆盖效果
            document.getElementById("myDiv").innerHTML = new Date().toLocaleString();
        }
        //开始-->> 开启一个定时器
        function startFn(){
            timer = setInterval(show , 1000);
        }
        //暂停 -->> 清除定时器即可
        function stopFn(){
            clearInterval(timer);
        }
    </script>
</head>
<body>
    <div id="myDiv"></div>
    <input type="button" value="开始" onclick="startFn()">
    <input type="button" value="停止" onclick="stopFn()">
</body>
</html>

Liutonglin

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-可控制的时钟（定时器）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;!-- 页面上有输出内容的地方有两个按钮开始暂停
复制链接

扫一扫

专栏目录