帮我用Html写一个时钟的页面
时间: 2023-03-11 17:53:52 浏览: 91
好的,以下是一个用HTML写的时钟页面的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
<style>
#clock {
font-size: 100px;
font-weight: bold;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body onload="startTime()">
<div 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;
setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
</script>
</body>
</html>
```
这段代码会在页面上创建一个时钟,并且实时更新显示当前的时间。其中,通过`<div>`元素来创建时钟的界面,使用了CSS样式来设置字体大小、字体加粗、文本对齐以及上边距。通过JavaScript中的`Date()`函数获取当前时间,再通过`innerHTML`属性将时、分、秒信息显示到页面上。最后,使用`setTimeout()`函数实现每隔一秒钟更新一次时间。
你可以将这段代码复制到文本编辑器中,并将其保存为`.html`文件,然后在浏览器中打开该文件以查看效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)