原生js实现电子时钟
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了js实现电子时钟的具体代码，供大家参考，具体内容如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字时钟</title>
<link rel="stylesheet" href="index.css" >
</head>
<body>
<div class="wrap">
<div class="item">0</div><!-- 0~2 -->
<div class="item">0</div><!-- 0~9 -->
<div class="colon">:</div>
<div class="item">0</div><!-- 0~6 -->
<div class="item">0</div><!-- 0~9 -->
<div class="colon">:</div>
<div class="item">0</div><!-- 0~6 -->
<div class="item">0</div><!-- 0~9 -->
</div>
<script class="lazy" data-src="clock.js"></script>
</body>
</html>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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
