javascript实现动态时钟的启动和停止

最新推荐文章于 2025-05-26 11:45:22 发布

Of_the

最新推荐文章于 2025-05-26 11:45:22 发布

阅读量8.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： JavaScript学习

本文链接：https://blog.youkuaiyun.com/qq_41140741/article/details/81509174

JavaScript学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍使用JavaScript实现网页上的动态时钟，包括实时显示当前时间及通过按钮控制时钟的启动与停止功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript实现动态时钟的启动和停止，点击开始按钮，获取当前时间，点击停止按钮，时间停止

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态时钟的启动和停止</title>
    </head>
    <body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 180px;">
    <!--1.显示当前时间
        2.启动秒表
        3.停止时钟
    -->
    <h1>动态时钟</h1>
    <p>
        当前时间：<span id="clock" style="color: #FF0000;"/> </span>
    </p>
    <p>
    <input type="button" value="start" onclick="start()" style="color: #FF0000;"/>
    <input type="button" value="stop" onclick="stop()" style="color: #FF0000;"/>
    </p>
    </body>
    <script type="text/javascript">
        var timer;
        function start(){
            //设置定时器（方法的实现，毫秒数）
             timer=setInterval(function(){
                var now=new Date();
                var time=now.toLocaleTimeString();
                var c=document.getElementById("clock");
                c.innerHTML=time;
            },1000);
        }
        function stop(){
            //暂停  清楚定时器
            clearInterval(timer);
        }
    </script>
</html>