jquery 倒計(jì)時(shí)效果實(shí)現(xiàn)秒殺思路

更新時(shí)間：2013年09月11日 15:49:27 作者：

公司做了個(gè)秒殺頁(yè)面，需要做一個(gè)倒計(jì)時(shí)效果，感覺(jué)還特此收藏，喜歡的朋友也可以學(xué)習(xí)下

 
<script type="text/javascript"> 
$(function(){ 
countDown("2015/9/8 11:11:59","#colockbox1"); 
}); 
function countDown(time,id){ 
var day_elem = $(id).find('.day'); 
var hour_elem = $(id).find('.hour'); 
var minute_elem = $(id).find('.minute'); 
var second_elem = $(id).find('.second'); 

//if(typeof end_time == "string") 
var end_time = new Date(time).getTime(),//月份是實(shí)際月份-1 
sys_second = (end_time-new Date().getTime())/1000; 
var timer = setInterval(function(){ 
if (sys_second > 1) { 
sys_second -= 1; 
var day = Math.floor((sys_second / 3600) / 24); 
var hour = Math.floor((sys_second / 3600) % 24); 
var minute = Math.floor((sys_second / 60) % 60); 
var second = Math.floor(sys_second % 60); 
day_elem && $(day_elem).text(day);//計(jì)算天 
$(hour_elem).text(hour<10?"0"+hour:hour);//計(jì)算小時(shí) 
$(minute_elem).text(minute<10?"0"+minute:minute);//計(jì)算分鐘 
$(second_elem).text(second<10?"0"+second:second);//計(jì)算秒殺 
} else { 
clearInterval(timer); 
} 
}, 1000); 
} 
</script> 

html:

復(fù)制代碼代碼如下:

 
<div class="colockbox" id="colockbox1"> 
<span class="day">00</span> 
<span class="hour">00</span> 
<span class="minute">00</span> 
<span class="second">00</span> 
</div> 

公司做了個(gè)秒殺頁(yè)面，需要做一個(gè)倒計(jì)時(shí)效果，特此收藏

代碼演示下載：http://www.dhdzp.com/jiaoben/103648.html

您可能感興趣的文章:

相關(guān)文章

原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效
本文主要分享了原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效的實(shí)例代碼?？芍苯訌?fù)制保存HTML運(yùn)行查看效果。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
jQuery中事件與動(dòng)畫的總結(jié)分享
下面小編就為大家?guī)?lái)一篇jQuery中事件與動(dòng)畫的總結(jié)分享。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jQuery實(shí)現(xiàn)首頁(yè)圖片淡入淡出效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)首頁(yè)圖片淡入淡出效果的方法,實(shí)例分析了jQuery圖片淡入淡出效果的相關(guān)使用技巧,需要的朋友可以參考下
2015-06-06
妙用Jquery的val()方法
Jquery的val()方法不僅能夠設(shè)置元素的值，同時(shí)也能獲取元素的值。常見(jiàn)的操作是對(duì)文本框的操作，比如判斷郵箱地址等
2012-06-06
JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table中的排序分析
從上篇文章，我們實(shí)現(xiàn)了Table分頁(yè)代碼的高效性，咱們繼續(xù)沿著這個(gè)思路，探討Table表格數(shù)據(jù)中另外一個(gè)很常見(jiàn)的排序問(wèn)題。說(shuō)到排序，我記得在asp.net中 GridView中提供了這樣的方便，只需在展示字段上加上 Sorting 這樣的屬性，基本就完成了，剩下就是服務(wù)端cs代碼的寫法了。
2010-01-01
jquery 學(xué)習(xí)筆記傳智博客佟老師附詳細(xì)注釋
本人水平有限，在學(xué)習(xí)時(shí)請(qǐng)用批判的態(tài)度學(xué)習(xí)，有問(wèn)題給我留言傳智博客佟老師 jqurey 學(xué)習(xí)筆記，以及例子代碼詳細(xì)注釋。
2009-07-07
基于jQuery和CSS3制作數(shù)字時(shí)鐘附源碼下載(jquery篇)
本篇文章基于jquery讓數(shù)字時(shí)鐘真正的跑起來(lái)，實(shí)現(xiàn)一個(gè)帶有日期和星期的網(wǎng)頁(yè)版數(shù)字時(shí)鐘，效果非常逼真，感興趣的朋友一起看看吧
2015-11-11
jQuery中過(guò)濾器的基本用法示例
這篇文章主要介紹了jQuery中過(guò)濾器的基本用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery過(guò)濾器針對(duì)table表格元素屬性進(jìn)行判斷與設(shè)置的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
Jquery中的$.each獲取各種返回類型數(shù)據(jù)的使用方法
each()方法能使DOM循環(huán)結(jié)構(gòu)簡(jiǎn)潔，不容易出錯(cuò)。each()函數(shù)封裝了十分強(qiáng)大的遍歷功能，使用也很方便，它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等，在javaScript開發(fā)過(guò)程中使用$each可以大大的減輕我們的工作量。
2015-05-05
jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可拖拽模態(tài)對(duì)話框完整實(shí)例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可拖拽模態(tài)對(duì)話框的方法,結(jié)合完整實(shí)例形式分析了jQuery調(diào)用模態(tài)對(duì)話框的基本原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下
2023-04-04