jquery 倒計(jì)時(shí)效果實(shí)現(xiàn)秒殺思路
<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:
<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.dbjr.com.cn/jiaoben/103648.html
- jQuery倒計(jì)時(shí)代碼(超簡(jiǎn)單)
- jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
- jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
- 利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
- jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能
- jQuery 實(shí)現(xiàn)倒計(jì)時(shí)天,時(shí),分,秒功能
- jquery實(shí)現(xiàn)可關(guān)閉的倒計(jì)時(shí)廣告特效代碼
- jQuery實(shí)現(xiàn)商品活動(dòng)倒計(jì)時(shí)
- JS/jquery實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)內(nèi)同時(shí)調(diào)用多個(gè)倒計(jì)時(shí)的方法
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能完整示例
相關(guān)文章
用jQuery簡(jiǎn)化JavaScript開(kāi)發(fā)分析
我總是樂(lè)于嘗試新工具或利用節(jié)省開(kāi)發(fā)時(shí)間的資源。由于市面上存在有許多Web開(kāi)發(fā)工具,你可能很難縮小搜索范圍。2009-02-02jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式
下面小編就為大家?guī)?lái)一篇jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12JQuery 確定css方框模型(盒模型Box Model)
做過(guò)前臺(tái)設(shè)置的都知道css存在兩種盒模型,W3C標(biāo)準(zhǔn)的方框模型和IE瀏覽器的方框模型。除IE以外的大多數(shù)瀏覽器只支持W3C方框模型。IE瀏覽器能夠根據(jù)頁(yè)面的呈現(xiàn)模式的定義而是用對(duì)性的方框模式。已用哪中呈現(xiàn)的模式取決于頁(yè)面上的DOCTYPE的聲明。2010-01-01jQuery關(guān)鍵詞說(shuō)明插件cluetip使用指南
我們?cè)谧鰓eb項(xiàng)目的時(shí)候,經(jīng)常會(huì)使用到提示效果。html自帶的提示效果是label標(biāo)簽的title,但是這個(gè)效果過(guò)于簡(jiǎn)單和難看,并且不方便調(diào)整樣式。今天我偶然發(fā)現(xiàn)個(gè)jQuery的插件,可以很方便的做出漂亮的提示效果。2015-04-04JQuery對(duì)表格進(jìn)行操作的常用技巧總結(jié)
這篇文章主要介紹了JQuery對(duì)表格進(jìn)行操作的常用技巧,需要的朋友可以參考下2014-04-04jQuery使用addClass()方法給元素添加多個(gè)class樣式
這篇文章主要介紹了jQuery使用addClass()方法給元素添加多個(gè)class樣式的方法,實(shí)例分析了addClass方法的使用技巧及添加多個(gè)樣式的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-03-03jQuery實(shí)現(xiàn)點(diǎn)擊查看大圖并以彈框的形式居中
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊查看大圖并以彈框的形式居中的代碼,代碼簡(jiǎn)單易懂,需要的朋友參考下2016-08-08jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)
本篇文章主要是對(duì)jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jquery中ajax使用error調(diào)試錯(cuò)誤的方法
這篇文章主要介紹了jquery中ajax使用error調(diào)試錯(cuò)誤的方法,實(shí)例分析了Ajax的使用方法與error函數(shù)調(diào)試錯(cuò)誤的技巧,需要的朋友可以參考下2015-02-02