javascript倒計(jì)時(shí)效果實(shí)現(xiàn)
更新時(shí)間：2015年11月12日 09:33:17 作者：小平果118
這篇文章為大家分享了javascript倒計(jì)時(shí)效果實(shí)現(xiàn)代碼段，現(xiàn)今團(tuán)購網(wǎng)、電商網(wǎng)、門戶網(wǎng)等，常使用時(shí)間記錄重要的時(shí)刻，如時(shí)間顯示、倒計(jì)時(shí)差、限時(shí)搶購等，特別是雙十一活動，需要的朋友可以參考下
本文分析不同倒計(jì)時(shí)效果的計(jì)算思路及方法，掌握日期對象Date，獲取時(shí)間的方法,計(jì)算時(shí)差的方法，實(shí)現(xiàn)不同的倒時(shí)計(jì)效果。
1、簡單時(shí)間顯示
講解日期對象Date,并通過該對象獲取時(shí)、分、秒等，讓你自由提取所需時(shí)間內(nèi)容。
<!DOCTYPE html>
<html>
<head>
<title>獲取時(shí)間</title>
<script type="text/javascript">
window.onload = function(){
showTime();
}
function showTime(){
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1;
var date = myDate.getDate();
var dateArr = ["日","一",'二','三','四','五','六'];
var day = myDate.getDay();
var hours = myDate.getHours();
var minutes = formatTime(myDate.getMinutes());
var seconds = formatTime(myDate.getSeconds());
var systemTime = document.getElementById("time");
systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" + minutes + ":" + seconds;
setTimeout("showTime()",500);
}
//格式化時(shí)間：分秒。
function formatTime (i){
if(i < 10){
i = "0" + i;
}
return i;
}
</script>
</head>
<body>
<div id ='time'></div>
</body>
</html>
顯示結(jié)果：
2、倒計(jì)時(shí)時(shí)差
講解gettime()等方法，及計(jì)算時(shí)間的方法，學(xué)會時(shí)間相差的天數(shù)。
<!DOCTYPE html>
<html>
<head>
<title>獲取時(shí)間</title>
<script type="text/javascript">
window.onload = function(){
deadTime();
}
function deadTime(){
var nowTime = new Date();
var finalTime = new Date("2015-11-11");
var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
var date = Math.ceil(lefttime);
document.getElementById("time").innerHTML = date;
}
</script>
</head>
<body>
<div >距離雙十一還有：<span id ='time'></span>天</div>
</body>
</html>
顯示效果：
3、限時(shí)搶購
如何運(yùn)用日期對象及方法，計(jì)算相差的天、時(shí)、分、秒的方法。
<!DOCTYPE html>
<html>
<head>
<title>團(tuán)購——限時(shí)搶</title>
</head>
<body>
<div class="time"> <span id="LeftTime"></span></div>
</div>
<script>
function FreshTime()
{
var endtime=new Date("2015/11/11,12:20:12");//結(jié)束時(shí)間
var nowtime = new Date();//當(dāng)前時(shí)間
var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
d=parseInt(lefttime/3600/24);
h=parseInt((lefttime/3600)%24);
m=parseInt((lefttime/60)%60);
s=parseInt(lefttime%60);
document.getElementById("LeftTime").innerHTML="距離活動結(jié)束還剩" + d+"天"+h+"小時(shí)"+m+"分"+s+"秒";
if(lefttime<=0){
document.getElementById("LeftTime").innerHTML="團(tuán)購已結(jié)束";
clearInterval(sh);
}
}
FreshTime();
var sh;
sh=setInterval(FreshTime,1000);
</script>
</body>
</html>
顯示效果：
知識點(diǎn)：
1.學(xué)會使用日期對象Date和方法。
2.學(xué)會不同時(shí)間內(nèi)容的獲取。
3.學(xué)會計(jì)算時(shí)差的方法。
本文介紹了常見的幾種倒計(jì)時(shí)效果，特別適合用于現(xiàn)今團(tuán)購網(wǎng)、電商網(wǎng)、門戶網(wǎng)等倒計(jì)時(shí)搶購活動，希望本文能幫助大家熟練掌握javascript倒計(jì)時(shí)效果的實(shí)現(xiàn)方法。
您可能感興趣的文章:
- 基于Javascript實(shí)現(xiàn)倒計(jì)時(shí)功能
- JavaScript電子時(shí)鐘倒計(jì)時(shí)
- 多個(gè)js毫秒倒計(jì)時(shí)同時(shí)進(jìn)行效果
- js倒計(jì)時(shí)搶購實(shí)例
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- js實(shí)現(xiàn)n秒倒計(jì)時(shí)后才可以點(diǎn)擊的效果
- js倒計(jì)時(shí)簡單實(shí)現(xiàn)方法
- js實(shí)現(xiàn)新年倒計(jì)時(shí)效果
- javascript電商網(wǎng)站搶購倒計(jì)時(shí)效果實(shí)現(xiàn)
- 最全面的JS倒計(jì)時(shí)代碼
相關(guān)文章
詳解使用grunt完成requirejs的合并壓縮和js文件的版本控制
這篇文章主要介紹了詳解使用grunt完成requirejs的合并壓縮和js文件的版本控制 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流with綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流with綁定的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滾動消息通知，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
vue路由權(quán)限校驗(yàn)功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由權(quán)限校驗(yàn)功能的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JS Loading功能的簡單實(shí)現(xiàn)。這個(gè)功能原理是很簡單的，就是一個(gè)DIV遮蓋當(dāng)前頁面，然后Loading就在遮蓋DIV層上展示出來2013-11-11
淺談javascript中的instanceof和typeof
這篇文章主要簡單介紹了javascript中的instanceof和typeof的相關(guān)資料,需要的朋友可以參考下2015-02-02
JS拖動效果，計(jì)算的位移，主要是應(yīng)用了鼠標(biāo)事件與坐標(biāo)控制。2009-11-11
javascript數(shù)組遍歷for與for in區(qū)別詳解
這篇文章主要介紹了javascript數(shù)組遍歷for與for in區(qū)別，是篇非常不錯(cuò)的文章，這里推薦給小伙伴們。
2014-12-12 
微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06