JavaScript动态电子时钟

最新推荐文章于 2023-12-09 11:08:42 发布

shy，轻语

最新推荐文章于 2023-12-09 11:08:42 发布

阅读量475

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_43291123/article/details/107563776

版权

JavaScript动态电子时钟

源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态电子时钟</title>
    <style>
    	.clock{
    		width: 400px;
    		height: 100px;
    		background: #000;
    		color: #0f0;
    		font-weight: bold;
    		border-radius: 50px;
    		text-align: center;
    		line-height: 80px;
    		font-size: 40px;
    	}
    </style>
</head>
<body>
	<div class="clock">
		<span id="sid"></span>
	</div>



	<script>
		function getDate() {
			dobj = new Date();
			hour = dobj.getHours();
			if(hour<10){
				hour = '0'+hour;
			}
			minute = dobj.getMinutes();
			if(minute<10){
				minute = '0'+minute;
			}
			second = dobj.getSeconds();
			if (second<10) {
				second = '0'+second;
			}
			str  =	hour  + ':' + minute + ':' +second;
			sidobj = document.getElementById('sid');
			sidobj.innerHTML = str;
}
getDate();
setInterval(function(){
	getDate();
},1000);



	</script>
</body>
</html>