jquery制做精致的倒計(jì)時(shí)特效
本文實(shí)例為大家分享了jquery做一個(gè)小的倒計(jì)時(shí)效果的代碼,供大家參考,具體內(nèi)容如下
html:
<div id="shop_rec">
<ul class="cf">
<li>
<img src="image/goods.jpg" alt="小米 Note 頂配版" />
<div>
<h5>小米 Note 頂配版</h5>
<p>全網(wǎng)通 香檳金 移動(dòng)聯(lián)通<br />雙4G手機(jī) 雙卡雙待</p>
<em>¥2998<i>起</i></em>
<span class="time" data-starttime="1445982375" data-endtime="1446350400"></span>
</div>
</li>
<li>
<img src="image/goods.jpg" alt="小米 Note 頂配版" />
<div>
<h5>小米 Note 頂配版</h5>
<p>全網(wǎng)通 香檳金 移動(dòng)聯(lián)通<br />雙4G手機(jī) 雙卡雙待</p>
<em>¥2998<i>起</i></em>
<span class="time" data-starttime="1445912375" data-endtime="1436350400"></span>
</div>
</li>
</ul>
</div>
jquery:
$(function(){
var abj = $("#shop_rec"),
timeObj = abj.find('.time');
var starttime = timeObj.data('starttime');
// 定時(shí)器函數(shù)
function actionDo(){
return setInterval(function(){
timeObj.each(function(index, el) {
var t = $(this),
surplusTime = t.data('endtime') -starttime;
if (surplusTime <= 0) {
t.html("活動(dòng)已經(jīng)開(kāi)始");
} else{
var year = surplusTime/(24*60*60*365),
showYear = parseInt(year),
month = (year-showYear)*12,
showMonth = parseInt(month),
day = (month-showMonth)*30,
showDay = parseInt(day),
hour = (day-showDay)*24,
showHour = parseInt(hour),
minute = (hour-showHour)*60,
showMinute = parseInt(minute),
seconds = (minute-showMinute)*60,
showSeconds = parseInt(seconds);
t.html("");
if (showYear>0) {
t.append("<span>"+showYear+"年</span>")
};
if (showMonth>0) {
t.append("<span>"+showMonth+"月</span>")
};
if (showDay>0) {
t.append("<span>"+showDay+"天</span>")
};
if (showHour>=0) {
t.append("<span>"+showHour+"小時(shí)</span>")
};
if (showMinute>=0) {
t.append("<span>"+showMinute+"分鐘</span>")
};
if (showSeconds>=0) {
t.append("<span>"+showSeconds+"秒</span>")
};
};
});
starttime++;
},1000); // 設(shè)定執(zhí)行或延時(shí)時(shí)間
};
// 執(zhí)行它
actionDo();
});
本文由FungLeo原創(chuàng)
本文地址:http://blog.csdn.net/fungleo/article/details/49446887
總結(jié)
不是特別優(yōu)秀,但是小的應(yīng)用完全沒(méi)有問(wèn)題。
精彩專題分享:js實(shí)現(xiàn)倒計(jì)時(shí)功能匯總
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- 基于jQuery的倒計(jì)時(shí)插件代碼
- 整理8個(gè)很棒的 jQuery 倒計(jì)時(shí)插件和教程
- JQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕的實(shí)現(xiàn)代碼
- 基于jQuery的倒計(jì)時(shí)實(shí)現(xiàn)代碼
- jquery 倒計(jì)時(shí)效果實(shí)現(xiàn)秒殺思路
- JQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕具體方法
- jquery ajax的success回調(diào)函數(shù)中實(shí)現(xiàn)按鈕置灰倒計(jì)時(shí)
- jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)的例子
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕功能代碼分享
相關(guān)文章
jQuery加密密碼到cookie的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家分享了jquery 加密密碼到cookie的實(shí)現(xiàn)方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-04-04
jQuery中創(chuàng)建實(shí)例與原型繼承揭秘
在普通情況下我們要用原生類、或者自定義類創(chuàng)建實(shí)例要用new運(yùn)算符,使構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例,并且實(shí)例繼承構(gòu)造器prototype上的所有公有方法2011-12-12
jQuery+formdata實(shí)現(xiàn)上傳進(jìn)度特效遇到的問(wèn)題
這篇文章主要介紹了jQuery+formdata實(shí)現(xiàn)上傳進(jìn)度特效遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2016-02-02
基于jQuery的網(wǎng)頁(yè)影音播放器jPlayer的基本使用教程
這篇文章主要介紹了基于jQuery的網(wǎng)頁(yè)影音播放器jPlayer的基本使用教程,文中的示例主要針對(duì)其播放音頻文件的用法,需要的朋友可以參考下2016-03-03
新聞上下滾動(dòng)jquery 超簡(jiǎn)潔(必看篇)
下面小編就為大家?guī)?lái)一篇新聞上下滾動(dòng)jquery 超簡(jiǎn)潔(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
通過(guò)實(shí)例解析jQ Ajax操作相關(guān)原理
這篇文章主要介紹了通過(guò)實(shí)例解析jQ Ajax操作相關(guān)原理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
jQuery Final Countdown是一款時(shí)尚的圓形進(jìn)度條樣式的jQuery倒計(jì)時(shí)插件。本篇文章給大家分享利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件,感興趣的朋友一起看看吧2015-09-09
jQuery基于json與cookie實(shí)現(xiàn)購(gòu)物車的方法
這篇文章主要介紹了jQuery基于json與cookie實(shí)現(xiàn)購(gòu)物車的方法,涉及jQuery操作json格式數(shù)據(jù)與cookie存儲(chǔ)購(gòu)物車信息的相關(guān)技巧,需要的朋友可以參考下2016-04-04
jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對(duì)話框(附demo源碼下載)
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對(duì)話框,具有可拖動(dòng)、放大、居中及關(guān)閉等功能,提供了2種對(duì)話框模式供讀者選擇,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05
jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果簡(jiǎn)單演示
這篇文章向大家推薦了一個(gè)jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果的簡(jiǎn)單演示,感興趣的小伙伴們可以參考一下2015-11-11

