溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關JavaScript如何利用Date實現簡單的倒計時，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
介紹
Date對象，是操作日期和時間的對象。Date對象對日期和時間的操作只能通過方法。Date在js中和Array類似，都是擁有自己的特殊方法的特殊對象。
創建 Date 對象的語法：
var myDate=new Date() //Date 對象會自動把當前日期和時間保存為其初始值。
獲取倒計時之前，我們不妨先來看怎樣獲取當前時間吧！！！
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);獲取倒計時
1、實現倒計時功能
2、倒計時結束按鈕可被點擊，之前不可被點擊
實例代碼：
<!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>無標題文檔</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');//結束日期不得在當前日期之前 var nowTime = new Date(); var splus = endTime.getTime() - nowTime.getTime(); //天 時 分 秒 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>關于“JavaScript如何利用Date實現簡單的倒計時”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
