溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

原生JS實(shí)現(xiàn)倒計(jì)時(shí)功能

發(fā)布時(shí)間：2020-05-12 13:56:18 來源：億速云 閱讀：142 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章為大家分享了原生JS實(shí)現(xiàn)倒計(jì)時(shí)功能的代碼，文中示例代碼介紹的非常詳細(xì)，零基礎(chǔ)也能參考此文章，感興趣的小伙伴們可以參考一下。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>倒計(jì)時(shí)</title>

<style>

strong{color: #f00;padding: 0 15px;};

</style>

<script type="text/javascript">

window.onload = function(){

setInterval(function(){

var now = (new Date()).getTime(), //獲取當(dāng)前時(shí)間到1970年1月1日0時(shí)的毫秒數(shù)

dest_time = (new Date(2016,1,11)).getTime(),  //獲取目標(biāo)時(shí)間到1970年1月1日0時(shí)的毫秒數(shù)

time_diff = dest_time - now;   //兩者的差值即為時(shí)間差，對(duì)其進(jìn)行處理

if(time_diff <= 0){

document.getElementsByTagName('p')[0].innerHTML = '時(shí)間已過期';

return;

}

var _day = parseInt(time_diff/(24*60*60*1000)), //距離雙十一的天數(shù)

_dayLeft = time_diff - _day*(24*60*60*1000),

_hours = parseInt(_dayLeft/(60*60*1000)),  //距離雙十一的小時(shí)數(shù)

_hoursLeft = _dayLeft - _hours*(60*60*1000),

_min = parseInt(_hoursLeft/(60*1000)),  //距離雙十一的分鐘數(shù)

_minLeft = _hoursLeft - _min*(60*1000),

_seconds = parseInt(_minLeft/1000);  //距離雙十一的秒數(shù)，忽略毫秒

var oStrong = document.getElementsByTagName('strong');

oStrong[0].innerHTML = _day;

oStrong[1].innerHTML = _hours;

oStrong[2].innerHTML = _min;

oStrong[3].innerHTML = _seconds;

},100);

}

</script>

</head>

<body>

<p>離雙十一還有:<strong></strong>天<strong></strong>時(shí)<strong></strong>分<strong></strong>秒</p>

</body>

</html>

看完上述內(nèi)容，你們掌握原生JS實(shí)現(xiàn)倒計(jì)時(shí)功能的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手