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;
? ? ? ? ? ? }

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

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;
? ? ? ? ? ? }
? ? ? ? ? ? // 定義一個空的字符串用來接收最后的值
? ? ? ? ? ? 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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: