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

