HTML，JavaScript实现时钟
公 众 号：木木与代码
本文作者：@MuMu
编写日期：2025年01月13日
本文字数：2662个字符
关注可了解更多的教程。问题或建议，请公众号留言；
/ 开始 /
HTML
设计界面元素，【00:00:00】格式的时间显示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻页时钟</title>
<link rel="stylesheet" href="./css/clock.css">
</head>
<body>
<main>
<div class="time hour">
<div id="h_h" class="clockNum">0</div>
<div id="h_l" class="clockNum">0</div>
</div>
<div>
<div class="point"></div>
<div class="point"></div>
</div>
<div class="time minute">
<div id="m_h" class="clockNum">0</div>
<div id="m_l" class="clockNum">0</div>
</div>
<div>
<div class="point"></div>
<div class="point"></div>
</div>
<div class="time second">
<div id="s_h" class="clockNum">0</div>
<div id="s_l" class="clockNum">0</div>
</div>
</main>
</body>
<script src="./js/clock.js"></script>
</html>CSS
完成页面的布局和美化页面。让页面的元素居中，设置字体和背景颜色。
:root{
--primary-color: #24222d;
}
*{
margin: 0;
padding: 0;
}
body{
background-color: var(--primary-color);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
user-select: none;
}
main{
display: flex;
justify-content: center;
align-items: center;
}
.time{
width: 430px;
height: 520px;
background-color: #35323e;
border: 3px solid #201e26;
border-radius: 17px;
flex: 1;
margin: 84px;
cursor: pointer;
transition: .5s;
position: relative;
color: #fff;
font-size: 18em;
font-weight: 900;
display: flex;
justify-content: center;
align-items: center;
}
.point{
background-color: aqua;
width: 30px;
height: 30px;
border-radius: 100px;
border: 3px solid #201e26;
}
.time::after{
content: '';
height: 10px;
width: 100%;
bottom: 50%;
background-color: #393443;
position: absolute;
}
.clockNum{
display: inline-block;
margin: 0px 34px 16px 34px;
transform: scaleY(2);
padding-bottom: 30px;
}
.second {
animation: scaleEffect 1s infinite;
}
@keyframes scaleEffect {
0% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.point{
background-color: #fff;
width: 40px;
height: 70px;
border-radius: 12px;
}
.point:nth-of-type(1) {
margin-bottom: 200px;
}
.point:nth-of-type(3) {
margin-bottom: 200px;
}JavaScript
JavaScript部分主要完成时间的更新。获取页面上的小时，分钟，秒元素id，获取当前时间并刷线页面显示。
function updateTime(){
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
writeTime('h_h', hours[0]); writeTime('h_l', hours[1]);
writeTime('m_h', minutes[0]); writeTime('m_l', minutes[1])
writeTime('s_h', seconds[0]); writeTime('s_l', seconds[1])
}
function writeTime(id, num){
const card = document.getElementById(id);
card.innerText = num
}
updateTime();
// 每一秒更新一次时间
setInterval(updateTime, 1000);获取完整源码
// 公众号《木木与代码》回复关键词“网页时钟”
到此本节文章内容已结束，谢谢您的阅读！
如有问题欢迎一起讨论！
结束
♥♥♥关注我们♥♥♥
