快捷導(dǎo)航

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)電子時(shí)鐘

更新時(shí)間：2022年06月19日 15:07:54 作者：人生本該如此

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

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)電子時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下

如圖就是一個(gè)簡(jiǎn)易的網(wǎng)頁(yè)電子時(shí)鐘，利用Javascript和 html和 css就可以制作

<div class="wrapper">
? ? ? ? <div class="time-box">
? ? ? ? ? ? <div class="hour"></div>
? ? ? ? ? ? <div class="sec"></div>
? ? ? ? </div>
?
? ? ? ? <div class="date">
? ? ? ? ? ? <div class="week"></div>
? ? ? ? ? ? <div class="date-box"></div>
? ? ? ? </div>
</div>

這是html的簡(jiǎn)單結(jié)構(gòu)，結(jié)構(gòu)相對(duì)簡(jiǎn)單，css樣式的話可以根據(jù)自己的喜好去設(shè)置，我這里就不把代碼發(fā)出來(lái)了

var hour = document.querySelector('.hour');
? ? ? ? var sec = document.querySelector('.sec');
? ? ? ? var week = document.querySelector('.week');
? ? ? ? var dateBox = document.querySelector('.date-box');
?
? ? ? ? //因?yàn)槎〞r(shí)器第一次會(huì)延時(shí)一秒，所以第一次會(huì)有一秒延遲，提前調(diào)用一次
? ? ? ? time();
?
? ? ? ? //設(shè)置定時(shí)器，每秒一次
? ? ? ? setInterval(time, 1000)
?
? ? ? ? //獲取當(dāng)?shù)貢r(shí)間，封裝成函數(shù)
? ? ? ? function time() {
? ? ? ? ? ? var date = new Date();
? ? ? ? ? ? var y = date.getFullYear();
? ? ? ? ? ? var m = date.getMonth() + 1;
? ? ? ? ? ? var d = date.getDate();
? ? ? ? ? ? var h = date.getHours();
? ? ? ? ? ? var min = date.getMinutes();
? ? ? ? ? ? var s = date.getSeconds();
? ? ? ? ? ? var w = date.getDay();
?
? ? ? ? ? ? //補(bǔ)0
? ? ? ? ? ? m = m < 10 ? '0' + m : m;
? ? ? ? ? ? d = d < 10 ? '0' + d : d;
? ? ? ? ? ? h = h < 10 ? '0' + h : h;
? ? ? ? ? ? min = min < 10 ? '0' + min : min;
? ? ? ? ? ? s = s < 10 ? '0' + s : s;
?
? ? ? ? ? ? hour.innerHTML = h + ':' + m;
? ? ? ? ? ? sec.innerHTML = s;
? ? ? ? ? ? week.innerHTML = '星期' + ['一', '二', '三', '四', '五', '六', '日'][w - 1];
? ? ? ? ? ? dateBox.innerHTML = y + '年' + m + '月' + d + '日';
?
? ? ? ? }

這是主要的Javascript代碼塊，主要是獲取當(dāng)前日期，年月日和時(shí)間，然后再把獲取的時(shí)間日期通過(guò)innerHTML這個(gè)方法修改到html中，因?yàn)樾枰棵腼@示，所以還需要?jiǎng)?chuàng)建一個(gè)定時(shí)器，時(shí)間為一秒，因?yàn)樾枰棵腼@示不一樣的內(nèi)容，所以需要把顯示的代碼以及獲取時(shí)間日期的部分也一起放到定時(shí)器當(dāng)中。因?yàn)槎〞r(shí)器第一次是有時(shí)間延遲的，所以需要在定時(shí)器之前調(diào)用一次這個(gè)封裝的函數(shù)。還有一個(gè)點(diǎn)就是星期的這一部分，因?yàn)楂@取到的星期是數(shù)字，要把數(shù)字轉(zhuǎn)為大寫(xiě)的星期，所以可以創(chuàng)建一個(gè)數(shù)組，用獲得的星期當(dāng)索引去獲取數(shù)組中的星期。這就是幾個(gè)主要的點(diǎn)，其他相對(duì)比較容易想到。

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

您可能感興趣的文章: