电脑html动态时钟代码

涛哥
Html代码

以下是一个简单的 HTML 动态时钟代码：

<!DOCTYPE html>
<html>
<head>
	<title>动态时钟</title>
	<style>
		.clock {
			font-size: 48px;
			font-weight: bold;
			text-align: center;
			margin-top: 100px;
		}
	</style>
</head>
<body onload="startTime()">
	<div class="clock" id="clock"></div>

	<script>
		function startTime() {
			var today = new Date();
			var h = today.getHours();
			var m = today.getMinutes();
			var s = today.getSeconds();
			m = checkTime(m);
			s = checkTime(s);
			document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
			var t = setTimeout(startTime, 500);
		}

		function checkTime(i) {
			if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
			return i;
		}
	</script>
</body>
</html>

这个时钟使用 JavaScript 来获取当前时间并更新时钟显示。在 HTML 中，我们使用一个带有 ID 的 div 元素来显示时钟，然后使用 CSS 设置其样式。在 body 元素的 onload 事件中，我们调用 startTime 函数来启动时钟，并且在每 500 毫秒（即 0.5 秒）内更新一次时钟。函数 checkTime 用于在分钟和秒钟数小于 10 时在数字前面添加一个零。

猜你喜欢：

html实现代码雨教程及源码分享

html生日蛋糕动画特效代码

java实现满天星星特性代码示例

 
  • 表白特效
  • 代码雨
  • 生日蛋糕
  • 时间