这篇文章主要介绍“怎么用原生js实现电子时钟”，在日常操作中，相信很多人在怎么用原生js实现电子时钟问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用原生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" rel="external nofollow" > </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 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;
}到此，关于“怎么用原生js实现电子时钟”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
