使用JS实现动态时钟

最新推荐文章于 2022-03-16 10:22:07 发布

「已注销」

最新推荐文章于 2022-03-16 10:22:07 发布

阅读量901

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43894771/article/details/104747964

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用JavaScript的setInterval函数来创建一个实时更新的动态时钟效果，通过结合HTML和CSS，展示了一个完整的时钟界面示例。

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

利用setTime()实现动态的时钟效果
代码如下

<html>
    <head>
        <meta charset="utf-8">
        <title>正在运行的时钟</title>
        <style type="text/css">
            /*设置样式：无边框的文本框*/
            input,
            #clock {
                width: 390;
                font-size: 30px;
                font-weight: 900;
                color: #FFFFFF;
                background-color: #930;
                border: 8px double #900;
 
            }
        </style>
 
    </head>
    <body onLoad="disptime( ) ">
        <form name="myform">
            <input name="myclock" type="text" value="" size="20">
        </form>
        <span id="clock"></span>
 
        <script language="JavaScript">
            function disptime() {
                var time = new Date(); //获得当前时间
                var year = time.getFullYear(); //获得年月日
                var month = time.getMonth(); //获得年月日
                var date = time.getDate(); //获得年月日
                var hour = time.getHours(); //获得小时、分钟、秒
                var minute = time.getMinutes();
                var second = time.getSeconds();
                if (minute < 10) //如果分钟只有1位，补0显示
                    minute = "0" + minute;
                if (second < 10) //如果秒数只有1位，补0显示
                    second = "0" + second;
                /*设置文本框的内容为当前时间*/
                document.getElementById('clock').innerHTML = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" +
                    second
                document.myform.myclock.value = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" + second
                /*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
                var myTime = setTimeout("disptime()", 1000);
 
            }
        </script>
    </body>
</html>

效果如图
在这里插入图片描述