基于javascript實(shí)現(xiàn)的購物商城商品倒計(jì)時(shí)實(shí)例
話不多說,下面跟著小編一起來看下實(shí)例代碼吧
Js:
/** * Author: Black_Jay郗 * downCount: 時(shí)間轉(zhuǎn)換 倒計(jì)時(shí) */ (function ($) { $.fn.downCount = function (options, callback) { var settings = $.extend({ date: null, offset: null }, options); if (!settings.date) { $.error('Date is not defined.'); } if (!Date.parse(settings.date)) { $.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.'); } var container = this; var currentDate = function () { var date = new Date(); /*var utc = date.getTime() + (date.getTimezoneOffset() * 60000); var new_date = new Date(utc + (3600000*settings.offset));*/ return date; }; function countdown () { var target_date = new Date(settings.date), current_date = currentDate(); var difference = target_date - current_date; if (difference < 0) { clearInterval(interval);//取消 setInterval() 函數(shù)設(shè)定的定時(shí)執(zhí)行操作 if (callback && typeof callback === 'function') callback(); return; } var _second = 1000, _minute = _second * 60, _hour = _minute * 60, _day = _hour * 24; var days = Math.floor(difference / _day), hours = Math.floor(((difference % _day) / _hour) + (days*24)), minutes = Math.floor((difference % _hour) / _minute), seconds = Math.floor((difference % _minute) / _second); days = (String(days).length >= 2) ? days : '0' + days; hours = (String(hours).length >= 2) ? hours : '0' + hours; minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes; seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds; container.find('.hours').text(hours); container.find('.minutes').text(minutes); container.find('.seconds').text(seconds); }; var interval = setInterval(countdown, 1000); }; })(jQuery);
html:
<!-- 倒計(jì)時(shí)顯示Star --> <p class="countdown"> <span class="hours">00</span>: <span class="minutes">00</span>: <span class="seconds">00</span> </p> <!-- 倒計(jì)時(shí)End -->
最后輸入你想要的結(jié)束時(shí)間
JS:
$('.countdown').downCount({ date: '11/09/2016 13:45:00', offset: +10 }, function () { alert('秒殺已結(jié)束'); });
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
JavaScript為事件句柄綁定監(jiān)聽函數(shù)實(shí)例詳解
這篇文章主要介紹了JavaScript為事件句柄綁定監(jiān)聽函數(shù)的方法,結(jié)合實(shí)例詳細(xì)分析了常見的事件句柄綁定監(jiān)聽函數(shù)的實(shí)現(xiàn)技巧,并實(shí)例講解了跨瀏覽器的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12JavaScript中各種二進(jìn)制對(duì)象關(guān)系的深入講解
JavaScript中用于表示二進(jìn)制對(duì)象有,Blob對(duì)象、和 ArrayBuffer 對(duì)象,這篇文章主要給大家介紹了關(guān)于JavaScript中各種二進(jìn)制對(duì)象關(guān)系的相關(guān)資料,需要的朋友可以參考下2021-09-09JavaScript實(shí)現(xiàn)獲取設(shè)備網(wǎng)絡(luò)連接信息
作為前端開發(fā),做好用戶體驗(yàn)是很重要的,日常開發(fā)中我們經(jīng)??梢杂龅接脩艟W(wǎng)速慢導(dǎo)致靜態(tài)資源加載慢,從而給影響用戶體驗(yàn),所以本文來和大家分享一個(gè)有趣的API,可以實(shí)現(xiàn)獲取網(wǎng)絡(luò)信息2023-05-05javascript+css實(shí)現(xiàn)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了javascript+css實(shí)現(xiàn)進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03JavaScript調(diào)用模式與this關(guān)鍵字綁定的關(guān)系
這篇文章主要介紹了JavaScript調(diào)用模式與this關(guān)鍵字綁定的關(guān)系 的相關(guān)資料,需要的朋友可以參考下2018-04-04OkHttp踩坑隨筆為何 response.body().string() 只能調(diào)用一次
想必大家都用過或接觸過 OkHttp,我最近在使用 Okhttp 時(shí),就踩到一個(gè)坑,在這兒分享出來,以后大家遇到類似問題時(shí)就可以繞過去2018-01-01判斷數(shù)組是否包含某個(gè)元素的js函數(shù)實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄袛鄶?shù)組是否包含某個(gè)元素的js函數(shù)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05XMLHTTP 亂碼的解決方法(UTF8,GB2312 編碼 解碼)
XMLHTTP 亂碼的解決方法(UTF8,GB2312 編碼 解碼)(附帶解決DHTMLX不能用中文的問題)2011-01-01