快捷導(dǎo)航

JS實(shí)現(xiàn)簡單網(wǎng)頁倒計(jì)時(shí)器

更新時(shí)間：2022年08月09日 11:30:01 作者：小楊不香菜

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

制作一個(gè)簡單的網(wǎng)頁倒計(jì)時(shí)器（js原生代碼），供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)一個(gè)簡單的網(wǎng)頁倒計(jì)時(shí)（距離xx年x月x日還剩多少時(shí)間），效果是這樣的

首先HTML代碼部分，我們需要簡單編寫一個(gè)html代碼，用來接收倒計(jì)時(shí)時(shí)間顯示。

<div id="box"></div>

接下來就是JS代碼部分。

首先要知道當(dāng)前的時(shí)間，然后還需要指定一個(gè)到期時(shí)間，拿到當(dāng)前時(shí)間和指定時(shí)間的時(shí)間差

function antitime() {
? ? var now = new Date(); //獲取當(dāng)前時(shí)間
? ? var to = new Date(2032, 1, 1, 0, 0, 0); //指定到期時(shí)間
? ? // 然后拿到當(dāng)前時(shí)間和指定時(shí)間的時(shí)間差，注意 是毫秒數(shù)
? ? var deltaTime = (to - now) / 1000; //到期時(shí)間和當(dāng)前時(shí)間相差的毫秒數(shù)/1000換算出總的秒數(shù)，方便后邊用
? ? // console.log(deltaTime)

判斷如果時(shí)間超了，停止倒計(jì)時(shí)

if (deltaTime <= 0) {
// 停止計(jì)時(shí)器
?window.clearInterval(antitime);
}

已知總的秒數(shù)，計(jì)算天數(shù)時(shí)分秒
這里用到了取整數(shù)的方法，用到哪在哪除，并給其定義賦值，方便后面取用，用parseInt()取整或者M(jìn)ath.floor()取整,在這里用的是Math.floor()。

// 計(jì)算天數(shù)并給其賦值
? ?var d = Math.floor(deltaTime / 3600 / 24),
? ? // 計(jì)算小時(shí)并給其賦值
? ?  h = Math.floor(deltaTime / 3600 % 24),
? ?// 計(jì)算分鐘并給其賦值
?  ? m = Math.floor(deltaTime / 60 % 60),
? ?// 計(jì)算秒數(shù)并給其賦值
?   s = Math.floor(deltaTime % 60);

實(shí)際上就是時(shí)間換算的基本運(yùn)算，這里看懂了也就簡單多了，只需要封裝好函數(shù)就可以了。

為了增加用戶體驗(yàn)，把時(shí)間的數(shù)字轉(zhuǎn)成字符串，如果分秒毫秒不足10，則前面補(bǔ)0。
這里應(yīng)該有更好的方法進(jìn)行封裝，為了更好理解，這樣寫出來。

if (d < 10) {
? ? ? ? ? ? ? ? d = '0' + d;
? ? ? ? ? ? } else if (h < 10) {
? ? ? ? ? ? ? ? h = '0' + h;
? ? ? ? ? ? } else if (m < 10) {
? ? ? ? ? ? ? ? m = '0' + m;
? ? ? ? ? ? } else if (s < 10) {
? ? ? ? ? ? ? ? s = '0' + s;
? ? ? ? ? ? }

接下來就是需要定義一個(gè)空的字符串用來接收最后字符串拼接的值。

var timer01 = '';
? timer01 = '距離2032年1月1日還有' + d + '天' + h + '小時(shí)' + m + '分' + s + '秒';
? ? document.getElementById('box');
? ? box.innerHTML = timer01;

document.getElementById() 獲取DOM元素節(jié)點(diǎn)，方便向節(jié)點(diǎn)填入數(shù)據(jù)并顯示。
box.innerHTML = timer01 讓id擁有box屬性的元素節(jié)點(diǎn)在頁面顯示timer01中的內(nèi)容。

最后，開啟定時(shí)器，并讓其1000毫秒更新一次

setInterval(antitime, 1000);

總體JS部分代碼加上注釋給大家放這里了

<script>
? ? ? ? // ? ?指定計(jì)時(shí)器到期時(shí)間，首先先封裝函數(shù)antitime()
? ? ? ? function antitime() {
? ? ? ? ? ? var now = new Date(); //獲取當(dāng)前時(shí)間
? ? ? ? ? ? var to = new Date(2032, 1, 1, 0, 0, 0); //指定到期時(shí)間
? ? ? ? ? ? // 然后拿到當(dāng)前時(shí)間和指定時(shí)間的時(shí)間差，注意 是毫秒數(shù)
? ? ? ? ? ? var deltaTime = (to - now) / 1000; //到期時(shí)間和當(dāng)前時(shí)間相差的毫秒數(shù)/1000換算出總的秒數(shù)，方便后邊用
? ? ? ? ? ? // console.log(deltaTime)
? ? ? ? ? ? // 判斷 如果時(shí)間超了，停止倒計(jì)時(shí)
? ? ? ? ? ? if (deltaTime <= 0) {
? ? ? ? ? ? ? ? // 停止計(jì)時(shí)器
? ? ? ? ? ? ? ? window.clearInterval(antitime);
? ? ? ? ? ? }
? ? ? ? ? ? // 已知毫秒數(shù)，計(jì)算天數(shù)時(shí)分秒
? ? ? ? ? ? // 這里用到了取整數(shù)的方法，用到哪在哪除，并給其定義賦值，方便后面取用，
? ? ? ? ? ? // 用parseInt()取整或者M(jìn)ath.floor()取整,在這里用的是Math.floor()。
? ? ? ? ? ? // 計(jì)算天數(shù)并給其賦值
? ? ? ? ? ? var d = Math.floor(deltaTime / 3600 / 24),
? ? ? ? ? ? ? ? // 計(jì)算小時(shí)并給其賦值
? ? ? ? ? ? ? ? h = Math.floor(deltaTime / 3600 % 24),
? ? ? ? ? ? ? ? // 計(jì)算分鐘并給其賦值
? ? ? ? ? ? ? ? m = Math.floor(deltaTime / 60 % 60),
? ? ? ? ? ? ? ? // 計(jì)算秒數(shù)并給其賦值
? ? ? ? ? ? ? ? s = Math.floor(deltaTime % 60);

? ? ? ? ? ? //為了增加用戶體驗(yàn)，把時(shí)間的數(shù)字轉(zhuǎn)成字符串，如果分秒毫秒不足10，則前面補(bǔ)0。
? ? ? ? ? ? // 這里應(yīng)該有更好的方法進(jìn)行封裝，為了更好理解，這樣寫出來。
? ? ? ? ? ? if (d < 10) {
? ? ? ? ? ? ? ? d = '0' + d;
? ? ? ? ? ? } else if (h < 10) {
? ? ? ? ? ? ? ? h = '0' + h;
? ? ? ? ? ? } else if (m < 10) {
? ? ? ? ? ? ? ? m = '0' + m;
? ? ? ? ? ? } else if (s < 10) {
? ? ? ? ? ? ? ? s = '0' + s;
? ? ? ? ? ? }
? ? ? ? ? ? // 定義一個(gè)空的字符串用來接收最后的值
? ? ? ? ? ? var timer01 = '';
? ? ? ? ? ? timer01 = '距離2032年1月1日還有' + d + '天' + h + '小時(shí)' + m + '分' + s + '秒';
? ? ? ? ? ? // document.getElementById() 獲取DOM元素節(jié)點(diǎn)，方便向節(jié)點(diǎn)填入數(shù)據(jù)并顯示
? ? ? ? ? ? document.getElementById('box');
? ? ? ? ? ? // 讓id擁有box屬性的元素節(jié)點(diǎn)在頁面顯示timer01中的內(nèi)容
? ? ? ? ? ? box.innerHTML = timer01;
? ? ? ? }
? ? ? ? // 開啟定時(shí)器，并讓其1000毫秒更新一次
? ? ? ? setInterval(antitime, 1000);
</script>

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

您可能感興趣的文章:

相關(guān)文章

TypeScript中的接口Interface詳解(對象類型的強(qiáng)大工具)
TypeScript中的接口是一個(gè)強(qiáng)大而靈活的特性,它為我們提供了一種清晰、簡潔的方式來定義對象的結(jié)構(gòu)和類型,通過使用接口,我們可以編寫更加健壯、可維護(hù)的代碼,這篇文章主要介紹了TypeScript中的接口(Interface):對象類型的強(qiáng)大工具,需要的朋友可以參考下
2024-08-08
JS中toFixed()方法四舍五入的精度問題詳解
最近在做項(xiàng)目的時(shí)候,遇到了有四舍五入保留兩位的需求,當(dāng)時(shí)不假思索的直接使用了js原生的toFixed方法,結(jié)果出現(xiàn)了問題,這篇文章主要給大家介紹了關(guān)于JS中toFixed()方法四舍五入精度問題的相關(guān)資料,需要的朋友可以參考下
2021-10-10
全面解析JavaScript Module模式
這篇文章主要介紹了JavaScript Module模式的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊功能
這篇文章主要介紹了node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊功能，非常不錯，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-01-01
JavaScript數(shù)組操作函數(shù)匯總
這篇文章主要針對JavaScript數(shù)組操作函數(shù)push，pop，join，shift，unshift，slice，splice，concat進(jìn)行總結(jié)，感興趣的小伙伴們可以參考一下
2016-08-08
本文通過實(shí)例給大家詳解介紹了Bootstrap筆記之縮略圖、警告框知識，非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03