h5动态时钟
时间: 2023-06-28 15:05:45 浏览: 112
以下是一个简单的HTML5动态时钟的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态时钟</title>
<style>
body {
background-color: #333;
color: #fff;
text-align: center;
font-size: 36px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>动态时钟</h1>
<p id="clock"></p>
<script>
function updateTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = addZeroPrefix(hours);
minutes = addZeroPrefix(minutes);
seconds = addZeroPrefix(seconds);
var timeString = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock").innerText = timeString;
}
function addZeroPrefix(num) {
if (num < 10) {
return "0" + num;
} else {
return num;
}
}
setInterval(updateTime, 1000);
</script>
</body>
</html>
```
这个示例使用了JavaScript的 `Date` 对象来获取当前时间,并使用 `setInterval` 函数每秒更新一次时间。 `addZeroPrefix` 函数用于在小时、分钟和秒数小于10时添加前导零。最后,将时间字符串显示在HTML页面的 `p` 元素中。
阅读全文