jquery 倒計時效果實(shí)現(xiàn)秒殺思路
更新時間:2013年09月11日 15:49:27 作者:
公司做了個秒殺頁面,需要做一個倒計時效果,感覺還特此收藏,喜歡的朋友也可以學(xué)習(xí)下
復(fù)制代碼 代碼如下:
<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);//計算天
$(hour_elem).text(hour<10?"0"+hour:hour);//計算小時
$(minute_elem).text(minute<10?"0"+minute:minute);//計算分鐘
$(second_elem).text(second<10?"0"+second:second);//計算秒殺
} 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>
公司做了個秒殺頁面,需要做一個倒計時效果,特此收藏
代碼演示下載:http://www.dbjr.com.cn/jiaoben/103648.html
您可能感興趣的文章:
- jQuery倒計時代碼(超簡單)
- jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計時代碼
- jquery簡單倒計時實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計時功能
- 利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計時插件
- jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計時功能
- jQuery 實(shí)現(xiàn)倒計時天,時,分,秒功能
- jquery實(shí)現(xiàn)可關(guān)閉的倒計時廣告特效代碼
- jQuery實(shí)現(xiàn)商品活動倒計時
- JS/jquery實(shí)現(xiàn)一個網(wǎng)頁內(nèi)同時調(diào)用多個倒計時的方法
- jQuery實(shí)現(xiàn)倒計時功能完整示例
相關(guān)文章
JQuery 確定css方框模型(盒模型Box Model)
做過前臺設(shè)置的都知道css存在兩種盒模型,W3C標(biāo)準(zhǔn)的方框模型和IE瀏覽器的方框模型。除IE以外的大多數(shù)瀏覽器只支持W3C方框模型。IE瀏覽器能夠根據(jù)頁面的呈現(xiàn)模式的定義而是用對性的方框模式。已用哪中呈現(xiàn)的模式取決于頁面上的DOCTYPE的聲明。2010-01-01jQuery關(guān)鍵詞說明插件cluetip使用指南
我們在做web項(xiàng)目的時候,經(jīng)常會使用到提示效果。html自帶的提示效果是label標(biāo)簽的title,但是這個效果過于簡單和難看,并且不方便調(diào)整樣式。今天我偶然發(fā)現(xiàn)個jQuery的插件,可以很方便的做出漂亮的提示效果。2015-04-04JQuery對表格進(jìn)行操作的常用技巧總結(jié)
這篇文章主要介紹了JQuery對表格進(jìn)行操作的常用技巧,需要的朋友可以參考下2014-04-04jQuery使用addClass()方法給元素添加多個class樣式
這篇文章主要介紹了jQuery使用addClass()方法給元素添加多個class樣式的方法,實(shí)例分析了addClass方法的使用技巧及添加多個樣式的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-03-03jQuery實(shí)現(xiàn)點(diǎn)擊查看大圖并以彈框的形式居中
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊查看大圖并以彈框的形式居中的代碼,代碼簡單易懂,需要的朋友參考下2016-08-08jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)
本篇文章主要是對jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery中ajax使用error調(diào)試錯誤的方法
這篇文章主要介紹了jquery中ajax使用error調(diào)試錯誤的方法,實(shí)例分析了Ajax的使用方法與error函數(shù)調(diào)試錯誤的技巧,需要的朋友可以參考下2015-02-02