html实现时钟
作者: 时间:2023-11-21阅读数:人阅读
1、html代码
<div id="clock">
<div>
<span id="hours"></span>
<span class="text"> 时 : </span>
</div>
<div>
<span id="minutes"></span>
<span class="text"> 分 : </span>
</div>
<div>
<span id="seconds"></span>
<span class="text">秒 </span>
</div>
</div>
2、js代码
function updateTime() {
// 获取当前时间
const now = new Date();
// 获取小时数
const hours = now.getHours();
// 获取分钟数
const minutes = now.getMinutes();
// 获取秒数
const seconds = now.getSeconds();
// 格式化小时数,如果小时数小于 10,则在前面加上一个 0
const hoursFormatted = hours < 10 ? `0${hours}` : hours;
// 格式化分钟数,如果分钟数小于 10,则在前面加上一个 0
const minutesFormatted = minutes < 10 ? `0${minutes}` : minutes;
// 格式化秒数,如果秒数小于 10,则在前面加上一个 0
const secondsFormatted = seconds < 10 ? `0${seconds}` : seconds;
// 获取显示小时数的元素节点对象
const hoursElem = document.getElementById('hours');
// 获取显示分钟数的元素节点对象
const minutesElem = document.getElementById('minutes');
// 获取显示秒数的元素节点对象
const secondsElem = document.getElementById('seconds');
// 将格式化后的小时数设置为显示小时数的元素的文本内容
hoursElem.textContent = hoursFormatted;
// 将格式化后的分钟数设置为显示分钟数的元素的文本内容
minutesElem.textContent = minutesFormatted;
// 将格式化后的秒数设置为显示秒数的元素的文本内容
secondsElem.textContent = secondsFormatted;
}
setInterval(updateTime, 1000);
3、css代码
#clock {
width: 200px;
height: 50px;
line-height: 50px;
background-color: black;
color: #fff;
display: flex;
justify-content: center;
}
#clock div {
position: relative;
width: 50px;
}
#clock div .text {
position: absolute;
top: 0;
right: 10px;
font-size: 12px;
}
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com