怎么用原生js实现电子时钟
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍“怎么用原生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 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;}到此，关于“怎么用原生js实现电子时钟”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
