溫馨提示×

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

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

JavaScript如何利用Date實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)

發(fā)布時(shí)間：2022-02-23 11:38:46 來源：億速云 閱讀：154 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript如何利用Date實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

介紹

Date對(duì)象，是操作日期和時(shí)間的對(duì)象。Date對(duì)象對(duì)日期和時(shí)間的操作只能通過方法。Date在js中和Array類似，都是擁有自己的特殊方法的特殊對(duì)象。

創(chuàng)建 Date 對(duì)象的語法：

var myDate=new Date() //Date 對(duì)象會(huì)自動(dòng)把當(dāng)前日期和時(shí)間保存為其初始值。

獲取倒計(jì)時(shí)之前，我們不妨先來看怎樣獲取當(dāng)前時(shí)間吧！?。?/strong>

function time(){ var oDate = new Date(); var year = oDate.getFullYear(); var month = oDate.getMonth() + 1 ; var dDate = oDate.getDate(); var day = oDate.getDay(); var house = oDate.getHours(); var minu = oDate.getMinutes(); var sec = oDate.getSeconds(); switch(day){ case 1: day = '星期一'; break; case 2: day = '星期二'; break; case 3: day = '星期三'; break; case 4: day = '星期四'; break; case 5: day = '星期五'; break; case 6: day = '星期六'; break; case 0: day = '星期日'; break; } function double( t ){ if( t < 10 ){ t = '0' + t; } return t; } document.body.innerHTML = year + '年' + month +'月'+ dDate + '日 ' + day + ' ' + double(house) +':'+ double(minu) +':' + double(sec); } time(); setInterval(time,1000);

獲取倒計(jì)時(shí)

     1、實(shí)現(xiàn)倒計(jì)時(shí)功能

     2、倒計(jì)時(shí)結(jié)束按鈕可被點(diǎn)擊，之前不可被點(diǎn)擊

實(shí)例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標(biāo)題文檔</title></head><body><div id="lastTime"> <span>0天 </span> <span>00: </span> <span>00: </span> <span>00 </span></div><br /><br /><style type="text/css">#btn{ text-decoration: none; display: block; width: 100px; height: 35px; background: #ccc; text-align: center; line-height: 35px; color: #666;}#btn.btn{ background: red; color: #fff; font-size: 20px; font-weight: bold;}</style><a href="javascript:;" id="btn">即將開搶!</a><script type="text/javascript"> var oLt = document.getElementById("lastTime"); var oBtn = document.getElementById("btn"); time(); var timer = setInterval( time , 1000 ); function time(){ var endTime = new Date('2017/01/13 00:00:00');//結(jié)束日期不得在當(dāng)前日期之前 var nowTime = new Date(); var splus = endTime.getTime() - nowTime.getTime(); //天 時(shí) 分 秒 if( splus <= 1 ){ clearInterval( timer ); oBtn.className = 'btn'; oBn.innerHTML = '開始秒殺!'; oBtn.href = 'http://www.baidu.com'; return; }else{ oBtn.className = ''; } var day = Math.floor( splus / 1000 / 60 / 60 / 24 ); var hours = Math.floor( splus / 1000 / 60 / 60 % 24 ); var min = Math.floor(splus / 1000 / 60 % 60); var sec = Math.floor(splus / 1000 % 60); oLt.innerHTML = day + '天 ' + double( hours ) + ':' + double( min ) + ':' + double( sec ); function double( n ){ if( n < 10 ){ n = '0' + n; } return n; } }</script></body></html>

關(guān)于“JavaScript如何利用Date實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

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

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

AI
助
手