欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年08月09日 11:30:01   作者：小楊不香菜  
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單網(wǎng)頁倒計時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

首先HTML代碼部分，我們需要簡單編寫一個html代碼，用來接收倒計時時間顯示。

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

接下來就是JS代碼部分。

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

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

判斷 如果時間超了，停止倒計時

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

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

// 計算天數(shù)并給其賦值
? ?var d = Math.floor(deltaTime / 3600 / 24),
? ? // 計算小時并給其賦值
? ?  h = Math.floor(deltaTime / 3600 % 24),
? ?// 計算分鐘并給其賦值
?  ? m = Math.floor(deltaTime / 60 % 60),
? ?// 計算秒數(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;
? ? ? ? ? ? }

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

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

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

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

setInterval(antitime, 1000);

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

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

? ? ? ? ? ? //為了增加用戶體驗，把時間的數(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;
? ? ? ? ? ? }
? ? ? ? ? ? // 定義一個空的字符串用來接收最后的值
? ? ? ? ? ? var timer01 = '';
? ? ? ? ? ? timer01 = '距離2032年1月1日還有' + d + '天' + h + '小時' + m + '分' + s + '秒';
? ? ? ? ? ? // document.getElementById() 獲取DOM元素節(jié)點，方便向節(jié)點填入數(shù)據(jù)并顯示
? ? ? ? ? ? document.getElementById('box');
? ? ? ? ? ? // 讓id擁有box屬性的元素節(jié)點在頁面顯示timer01中的內(nèi)容
? ? ? ? ? ? box.innerHTML = timer01;
? ? ? ? }
? ? ? ? // 開啟定時器，并讓其1000毫秒更新一次
? ? ? ? setInterval(antitime, 1000);
</script>

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

相關(guān)文章

最新評論