原生js實現(xiàn)電子時鐘

更新時間：2022年06月19日 14:15:32 作者：止水、

這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)電子時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)電子時鐘的具體代碼，供大家參考，具體內(nèi)容如下

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>數(shù)字時鐘</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 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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: