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

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

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

本文實(shí)例為大家分享了js實(shí)現(xiàn)電子時(shí)鐘的具體代碼，供大家參考，具體內(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ù)字時(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

常見瀏覽器多長時(shí)間會(huì)提示“腳本運(yùn)行時(shí)間過長”總結(jié)
這篇文章主要介紹了常見瀏覽器多長時(shí)間會(huì)提示“腳本運(yùn)行時(shí)間過長”總結(jié),需要的朋友可以參考下
2014-04-04
javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法,涉及javascript表格操作及按鈕實(shí)現(xiàn)表格切換的技巧,需要的朋友可以參考下
2015-05-05
JavaScript通過this變量快速找出用戶選中radio按鈕的方法
這篇文章主要介紹了JavaScript通過this變量快速找出用戶選中radio按鈕的方法,涉及javascript中this變量的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
深入理解js promise chain
下面小編就為大家?guī)硪黄钊肜斫鈐s promise chain。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
javascript避免數(shù)字計(jì)算精度誤差的方法詳解
本篇文章主要是對(duì)javascript避免數(shù)字計(jì)算精度誤差的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-03-03
JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)圖片并統(tǒng)計(jì)點(diǎn)擊次數(shù)功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)圖片并統(tǒng)計(jì)點(diǎn)擊次數(shù)功能,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-07-07
js仿QQ郵箱收件人選擇與搜索功能
這篇文章主要為大家詳細(xì)介紹了js仿QQ郵箱收件人選擇與搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法
今天小編就為大家分享一篇解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
基于javascript實(shí)現(xiàn)圖片切換效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)圖片切換效果的相關(guān)資料,需要的朋友可以參考下
2016-04-04
微信小程序中添加客服按鈕contact-button功能
這篇文章主要介紹了微信小程序中添加客服按鈕contact-button功能，小程序的客服系統(tǒng)，是微信做的非常成功的功能，開發(fā)者很容易的實(shí)現(xiàn)客服功能
2018-04-04