javascript實(shí)現(xiàn)搶購倒計時程序
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)搶購倒計時的具體代碼,供大家參考,具體內(nèi)容如下
倒計時分為三種狀態(tài):
1) 未到搶購開始時間,顯示:搶票倒計時××天××?xí)r××分××秒
2) 開始搶購,顯示:搶票還?!痢撂臁痢?xí)r××分××秒
3) 搶購?fù)戤?,顯示:本輪搶購結(jié)束
搶購的起始時間和截止時間,可以通過C#代碼輸出。
此代碼兼容其它瀏覽器。
<div id="clientclock">
</div>
<br />
<br />
<br />
<br />
<mce:script type="text/javascript"><!--
//搶票起始時間 2011年2月29日10點(diǎn)10分0秒,月份的定義從0開始,因此1表示2月份。
var start = new Date('2011', '1', '29', '10', '10', '00');
//var start = new Date('2011','1', '28', '15', '10', '00');
//搶票截止時間 2011年2月29日11點(diǎn)10分59秒
var expire = new Date('2011', '1', '29', '11', '10', '59');
//顯示倒計時的HTML對象
var clock = document.getElementById('clientclock');
//倒計時函數(shù),每秒執(zhí)行一次
setLeftTime();
function setLeftTime() {
var now = new Date();
//如果當(dāng)前時間小于搶票起始時間,那么顯示:搶票倒計時××天××?xí)r××分××秒
if (now < start) {
var diff = -480 - now.getTimezoneOffset() //是北京時間和當(dāng)?shù)貢r間的時間差
var lefttime = (start.getTime() - now.getTime()) + diff * 60000
var day = Math.floor(lefttime / (1000 * 60 * 60 * 24));
var hour = Math.floor(lefttime / (1000 * 3600)) - (day * 24);
var minute = Math.floor(lefttime / (1000 * 60)) - (day * 24 * 60) - (hour * 60);
var second = Math.floor(lefttime / (1000)) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
clock.innerHTML = '搶票倒計時:<span class="ztCopy">' + day + '</span>天 <span class="ztCopy">' + hour + '</span>時 <span class="ztCopy">' + minute + '</span>分 <span class="ztCopy">' + second + '</span>秒';
}
//如果當(dāng)前時間大于等于搶票起始時間,小于搶票截止時間,即:正在搶票,那么顯示:搶票還剩××天××?xí)r××分××秒
else if (now <= expire) {
var diff = -480 - now.getTimezoneOffset() //是北京時間和當(dāng)?shù)貢r間的時間差
var lefttime = (expire.getTime() - now.getTime()) + diff * 60000
var day = Math.floor(lefttime / (1000 * 60 * 60 * 24));
var hour = Math.floor(lefttime / (1000 * 3600)) - (day * 24);
var minute = Math.floor(lefttime / (1000 * 60)) - (day * 24 * 60) - (hour * 60);
var second = Math.floor(lefttime / (1000)) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
clock.innerHTML = '搶票還剩:<span class="ztCopy">' + day + '</span>天 <span class="ztCopy">' + hour + '</span>時 <span class="ztCopy">' + minute + '</span>分 <span class="ztCopy">' + second + '</span>秒';
}
//如果當(dāng)前時間大于搶票截止時間,即:本輪搶票結(jié)束,那么顯示:本輪搶購結(jié)束
else {
clock.innerHTML = '本輪搶購結(jié)束';
}
setTimeout("setLeftTime()", 1000);
}
// --></mce:script>
更多關(guān)于倒計時的文章請查看專題:《倒計時功能》
更多JavaScript時鐘特效點(diǎn)擊查看:JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript下使用Promise封裝FileReader
這篇文章主要介紹了javascript下使用Promise封裝FileReader,需要的朋友可以參考下2016-02-02
(function(){})()的用法與優(yōu)點(diǎn)
(function(){})()的用法與優(yōu)點(diǎn)...2007-03-03
原生JS面向?qū)ο髮?shí)現(xiàn)打磚塊小游戲
這篇文章主要為大家詳細(xì)介紹了原生JS面向?qū)ο髮?shí)現(xiàn)打磚塊小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-09-09
VsCode插件自動生成注釋插件koroFileHeader使用教程
這篇文章主要介紹了VsCode插件自動生成注釋插件koroFileHeader使用教程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
Highcharts 非常實(shí)用的Javascript統(tǒng)計圖demo示例
官網(wǎng)實(shí)例中給出了各式各樣的demo,可以參照document修改自己需要的即可,本文實(shí)現(xiàn)的是一個學(xué)生成績走勢demo,有需求的朋友可以參考下哈,希望對大家有所幫助2013-07-07
JS實(shí)現(xiàn)網(wǎng)頁滾動條感應(yīng)鼠標(biāo)變色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁滾動條感應(yīng)鼠標(biāo)變色的方法,實(shí)例分析了javascript針對鼠標(biāo)事件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
Bootstrap文件上傳組件之bootstrap fileinput
這篇文章主要介紹了Bootstrap文件上傳組件之bootstrap fileinput,重點(diǎn)是把界面做得更加友好,更好的增加用戶體驗(yàn)。還有還多注意細(xì)節(jié)大家可以通過本文詳細(xì)了解下2016-11-11

