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，则在前面加上一个 0const hoursFormatted = hours < 10 ? `0${hours}` : hours;// 格式化分钟数，如果分钟数小于 10，则在前面加上一个 0const minutesFormatted = minutes < 10 ? `0${minutes}` : minutes;// 格式化秒数，如果秒数小于 10，则在前面加上一个 0const 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;}