本文介绍如何利用JavaScript结合HTML与CSS构建一个简易的网页电子时钟。核心逻辑包括通过Date对象获取当前年月日、时间及星期，利用setInterval实现每秒刷新显示，并通过DOM操作更新页面元素。文中特别说明了处理定时器初始延迟及星期数字转中文的方法。
JavaScript实现网页电子时钟
本文分享了一个使用JavaScript实现网页电子时钟的具体代码示例，供读者参考学习。
如图所示，这是一个简易的网页电子时钟效果，仅需利用JavaScript、HTML和CSS即可制作完成。
<div class="wrapper">
<div class="time-box">
<div class="hour"></div>
<div class="sec"></div>
</div>
<div class="date">
<div class="week"></div>
<div class="date-box"></div>
</div>
</div>HTML部分结构较为简单，CSS样式可根据个人喜好自行设置，此处省略具体样式代码。
var hour = document.querySelector('.hour');
var sec = document.querySelector('.sec');
var week = document.querySelector('.week');
var dateBox = document.querySelector('.date-box');
//因为定时器第一次会延时一秒，所以第一次会有一秒延迟，提前调用一次
time();
//设置定时器，每秒一次
setInterval(time, 1000)
//获取当地时间，封装成函数
function time() {
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds();
var w = date.getDay();
//补0
m = m < 10 ? '0' + m : m;
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
min = min < 10 ? '0' + min : min;
s = s < 10 ? '0' + s : s;
hour.innerHTML = h + ':' + m;
sec.innerHTML = s;
week.innerHTML = '星期' + ['一', '二', '三', '四', '五', '六', '日'][w - 1];
dateBox.innerHTML = y + '年' + m + '月' + d + '日';
}核心JavaScript代码主要涉及获取当前日期、年月日及时间，并通过innerHTML方法将获取的时间日期更新到HTML元素中。为了实现每秒刷新显示，需要创建一个一秒执行一次的定时器。由于定时器首次执行存在一秒延迟，因此在启动定时器前需先手动调用一次封装好的时间更新函数。此外，关于星期的显示，因Date对象返回的是数字，需创建一个包含中文星期字符串的数组，以获取的数字作为索引从数组中取值，从而正确显示星期信息。其余部分逻辑较为直观。
以上就是本文的全部内容，希望能为各位的学习提供帮助，欢迎大家继续支持本站。