JavaScript实现网页电子时钟

来源：jb51　　时间：2022/6/20 8:40:33　　对本文有异议

本文实例为大家分享了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中，因为需要每秒显示，所以还需要创建一个定时器，时间为一秒，因为需要每秒显示不一样的内容，所以需要把显示的代码以及获取时间日期的部分也一起放到定时器当中。因为定时器第一次是有时间延迟的，所以需要在定时器之前调用一次这个封装的函数。还有一个点就是星期的这一部分，因为获取到的星期是数字，要把数字转为大写的星期，所以可以创建一个数组，用获得的星期当索引去获取数组中的星期。这就是几个主要的点，其他相对比较容易想到。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

友情链接：直通硅谷　点职佳　北美留学生论坛