首页 热点 业界 科技快讯 数码 电子消费 通信 前沿动态 电商

观点:原生js实现电子时钟

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;}

标签: 为大家分享 大家参考 数字时钟

相关文章

最近更新
观焦点:超萌相机 2023-03-01 12:29:37
海南百货网 2023-03-01 12:13:44
焦点热讯:宜点充 2023-02-28 10:10:16
天天关注:小铺CEO 2023-02-28 10:07:13
【世界聚看点】KaFit 2023-02-28 09:31:37
葱天下 2023-02-28 09:17:03
渔界竞钓 2023-02-28 08:15:29
焦点快看:鲸奇视频 2023-02-28 06:30:37
环球热议:萝小逗 2023-02-27 23:25:49
简讯:小码公交 2023-02-27 23:16:12
彼岸花 2023-02-27 22:32:52
时时夺宝 2023-02-27 21:37:50
天天动态:袜之源 2023-02-27 21:29:50
天天资讯:AI空气 2023-02-27 20:19:46
世界时讯:绘读 2023-02-27 20:19:41
看点:一元得购 2023-02-27 19:26:28