JS实现电子时钟，一分钟学会！

最新推荐文章于 2023-01-12 12:50:34 发布

原创最新推荐文章于 2023-01-12 12:50:34 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css3

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的实时电子时钟方法，通过Date对象获取当前时间，并利用setInterval定时更新页面显示的时间，实现了动态显示系统时间的功能。

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

今天介绍一种电子时钟方式，这是一种获取系统时间的方法，让我们一起来看看吧！
运行效果：

1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>j实现电子时钟</title>
		<link rel="stylesheet" href="css/main.css" />
		<script type="text/javascript" src="js/main.js" ></script>
	</head>
	<body>
	<!--
                	电子时钟
                -->
                <span class="item">北京时间：</span>
                <span id = "p1" class="item">
	</body>
	</html>

2.js

//电子时钟
function toDate(n){
        if(n<10){
            return '0'+n;
        }else{
            return ''+n;
        }
    };
    window.onload = function(){
        function trick(){
            var oDate = new Date();		/*Date对象*/
            var H = toDate(oDate.getHours());
            var M = toDate(oDate.getMinutes());
            var S = toDate(oDate.getSeconds());
            var t = H +":"+ M +":"+S;
            document.getElementById('p1').innerHTML = t;
        }
        setInterval(trick,1000);
    };

大家可以给电子时钟添加美观的样式！