2022-06-20 06:14:08 来源 : 软件开发网
(相关资料图)
本文实例为大家分享了js实现电子时钟的具体代码,供大家参考,具体内容如下
index.html
数字时钟 0 0 : 0 0 : 0 0 <script src="clock.js"></script>
index.css
* { margin: 0; padding: 0;}body { background-color: black;}.wrap { width: 800px; height: 100px; background-color: #355da7; border-radius: 10px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; display: flex;}.wrap .item,.wrap .colon { flex: 1; text-align: center; line-height: 100px; font-size: 70px; font-weight: 100; color: wheat;}
clock.js
let item = document.getElementsByClassName("item");function changeTime() { setInterval(function() { let hour = new Date().getHours(); let minute = new Date().getMinutes(); let sec = new Date().getSeconds(); let hourItem = handleTime(hour); let minuteItem = handleTime(minute); let secItem = handleTime(sec); item[0].innerHTML = hourItem[0]; item[1].innerHTML = hourItem[1]; item[2].innerHTML = minuteItem[0]; item[3].innerHTML = minuteItem[1]; item[4].innerHTML = secItem[0]; item[5].innerHTML = secItem[1]; },1000)}changeTime();function handleTime(number) { let arr = []; //23 =2--3 //11 =1--1 //10 % 10 = 1--0 //5 % 10 = 0--5 let a = number % 10; let b = (number - a) / 10; arr.push(b,a); return arr;}