h5动态时钟
时间: 2023-06-28 19:05:45 浏览: 74
以下是一个简单的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` 元素中。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)