经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
原生js实现电子时钟
来源:jb51  时间:2022/6/20 8:40:40  对本文有异议

本文实例为大家分享了js实现电子时钟的具体代码,供大家参考,具体内容如下

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. ? ? <meta charset="UTF-8">
  5. ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. ? ? <title>数字时钟</title>
  8. ? ? <link rel="stylesheet" href="index.css" >
  9. </head>
  10. <body>
  11. ? ? <div class="wrap">
  12. ? ? ? ? <div class="item">0</div><!-- 0~2 -->
  13. ? ? ? ? <div class="item">0</div><!-- 0~9 -->
  14. ? ? ? ? <div class="colon">:</div>
  15. ? ? ? ? <div class="item">0</div><!-- 0~6 -->
  16. ? ? ? ? <div class="item">0</div><!-- 0~9 -->
  17. ? ? ? ? <div class="colon">:</div>
  18. ? ? ? ? <div class="item">0</div><!-- 0~6 -->
  19. ? ? ? ? <div class="item">0</div><!-- 0~9 -->
  20. ? ? </div>
  21. ? ? <script src="clock.js"></script>
  22. </body>
  23. </html>

index.css

  1. * {
  2. ? ? margin: 0;
  3. ? ? padding: 0;
  4. }
  5. body {
  6. ? ? background-color: black;
  7. }
  8. .wrap {
  9. ? ? width: 800px;
  10. ? ? height: 100px;
  11. ? ? background-color: #355da7;
  12. ? ? border-radius: 10px;
  13. ? ? position: absolute;
  14. ? ? left: 0;
  15. ? ? top: 0;
  16. ? ? right: 0;
  17. ? ? bottom: 0;
  18. ? ? margin: auto;
  19. ? ? display: flex;
  20. }
  21. .wrap .item,
  22. .wrap .colon {
  23. ? ? flex: 1;
  24. ? ? text-align: center;
  25. ? ? line-height: 100px;
  26. ? ? font-size: 70px;
  27. ? ? font-weight: 100;
  28. ? ? color: wheat;
  29. }

clock.js

  1. let item = document.getElementsByClassName("item");
  2.  
  3. function changeTime() {
  4. ? ? setInterval(function() {
  5. ? ? ? ? let hour = new Date().getHours();
  6. ? ? ? ? let minute = new Date().getMinutes();
  7. ? ? ? ? let sec = new Date().getSeconds();?
  8. ? ? ? ? let hourItem = handleTime(hour);
  9. ? ? ? ? let minuteItem = handleTime(minute);
  10. ? ? ? ? let secItem = handleTime(sec);
  11.  
  12. ? ? ? ? item[0].innerHTML = hourItem[0];
  13. ? ? ? ? item[1].innerHTML = hourItem[1];
  14. ? ? ? ? item[2].innerHTML = minuteItem[0];
  15. ? ? ? ? item[3].innerHTML = minuteItem[1];
  16. ? ? ? ? item[4].innerHTML = secItem[0];
  17. ? ? ? ? item[5].innerHTML = secItem[1];
  18. ? ? },1000)
  19. }
  20. changeTime();
  21. function handleTime(number) {
  22. ? ? let arr = [];
  23. ? ? //23 =2--3
  24. ? ? //11 =1--1
  25. ? ? //10 % 10 = 1--0
  26. ? ? //5 % 10 = 0--5
  27. ? ? let a = number % 10;
  28. ? ? let b = (number - a) / 10;
  29. ? ? arr.push(b,a);
  30. ? ? return arr;
  31. }

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

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

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号