JavaScript利用Date實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)實(shí)例
更新時(shí)間：2017年01月12日 10:49:45 作者：小紙人兒
在日常開(kāi)發(fā)的時(shí)候經(jīng)常遇到關(guān)于倒計(jì)時(shí)的需求，下面這篇文章就給主要介紹了JavaScript利用Date實(shí)現(xiàn)倒計(jì)時(shí)效果的方法示例，文中主要實(shí)現(xiàn)了倒計(jì)時(shí)和倒計(jì)時(shí)結(jié)束搶購(gòu)的按鈕才可以被點(diǎn)擊的效果，有需要的朋友可以參考借鑒。
介紹
Date對(duì)象，是操作日期和時(shí)間的對(duì)象。Date對(duì)象對(duì)日期和時(shí)間的操作只能通過(guò)方法。Date在js中和Array類(lèi)似，都是擁有自己的特殊方法的特殊對(duì)象。
創(chuàng)建 Date 對(duì)象的語(yǔ)法：
var myDate=new Date() //Date 對(duì)象會(huì)自動(dòng)把當(dāng)前日期和時(shí)間保存為其初始值。
獲取倒計(jì)時(shí)之前，我們不妨先來(lái)看怎樣獲取當(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>無(wú)標(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">即將開(kāi)搶!</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 = '開(kāi)始秒殺!';
oBtn.;
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>
效果圖如下：
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
您可能感興趣的文章:
- JS實(shí)現(xiàn)針對(duì)給定時(shí)間的倒計(jì)時(shí)功能示例
- js實(shí)現(xiàn)倒計(jì)時(shí)效果（小于10補(bǔ)零）
- 原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018
- js實(shí)現(xiàn)短信發(fā)送倒計(jì)時(shí)功能（正則驗(yàn)證）
- js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能
- 原生js實(shí)現(xiàn)節(jié)日時(shí)間倒計(jì)時(shí)功能
- JS 倒計(jì)時(shí)實(shí)現(xiàn)代碼(時(shí)、分，秒)
- 簡(jiǎn)單易用的倒計(jì)時(shí)js代碼
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
- JS倒計(jì)時(shí)代碼匯總
- js實(shí)現(xiàn)發(fā)送驗(yàn)證碼后的倒計(jì)時(shí)功能
- JavaScript實(shí)現(xiàn)的商品搶購(gòu)倒計(jì)時(shí)功能示例
相關(guān)文章
這篇文章主要介紹了百度搜索框智能提示案例jsonp的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
如何調(diào)用執(zhí)行iframe中的方法？如下2008-10-10
這篇文章主要介紹了詳解如何使用webpack打包JS，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
JavaScript實(shí)現(xiàn)繼承的4種方法總結(jié)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)繼承的4種方法總結(jié),本文給出了原型鏈繼承、構(gòu)造繼承、實(shí)例繼承、拷貝繼承等實(shí)現(xiàn)JS繼承的方法,需要的朋友可以參考下2014-10-10
本篇文章主要介紹了js實(shí)現(xiàn)截圖功能的代碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JavaScript設(shè)計(jì)模式之策略模式詳解
設(shè)計(jì)模式(Design pattern)是解決軟件開(kāi)發(fā)某些特定問(wèn)題而提出的一些解決方案也可以理解成解決問(wèn)題的一些思路,下面這篇文章主要給大家介紹了關(guān)于JavaScript設(shè)計(jì)模式之策略模式的相關(guān)資料,需要的朋友可以參考下2022-06-06
下面小編就為大家?guī)?lái)一篇基于require.js的使用(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
實(shí)例講解JavaScript中call、apply、bind方法的異同
這篇文章主要以實(shí)例講解的方式為大家總結(jié)了JavaScript中call、apply、bind方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
微信小程序開(kāi)發(fā)之IOS和Android兼容的問(wèn)題
這篇文章主要介紹了微信小程序開(kāi)發(fā)之IOS和Android兼容的問(wèn)題的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-09-09
很多時(shí)候我們需要在前臺(tái)獲取當(dāng)前日期,下面這篇文章主要給大家介紹了關(guān)于使用js獲取當(dāng)前年月日的方法及格式整理的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12