js實(shí)現(xiàn)網(wǎng)頁(yè)同時(shí)進(jìn)行多個(gè)倒計(jì)時(shí)功能
本文實(shí)例為大家分享了js實(shí)現(xiàn)網(wǎng)頁(yè)同時(shí)進(jìn)行多個(gè)倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下
創(chuàng)建一個(gè)時(shí)間類Timer.
每個(gè)商品的倒計(jì)時(shí)生成一個(gè)實(shí)例:var time = new Timer();
/**
*startime 應(yīng)該是毫秒數(shù)
*/
var Alarm = function (startime, endtime, countFunc, endFunc) {
this.time = Math.floor((endtime - startime) / 1000); //時(shí)間
this.countFunc = countFunc; //計(jì)時(shí)函數(shù)
this.endFunc = endFunc; //結(jié)束函數(shù)
this.flag = 't' + Date.parse(new Date()); //
};
Alarm.prototype.start = function () {
var self = this;
self.flag = setInterval(function () {
if (self.time < 0) {
clearInterval(self.flag);
self.endFunc();
console.log('計(jì)時(shí)結(jié)束');
} else {
var minute, hour, day, second;
day = Math.floor(self.time / 60 / 60 / 24) < 10 ? '0' + Math.floor(self.time / 60 / 60 / 24) : Math.floor(self.time / 60 / 60 / 24);
hour = Math.floor(self.time / 60 / 60 % 24) < 10 ? '0' + Math.floor(self.time / 60 / 60 % 24) : Math.floor(self.time / 60 / 60 % 24);
minute = Math.floor(self.time / 60 % 60) < 10 ? '0' + Math.floor(self.time / 60 % 60) : Math.floor(self.time / 60 % 60);
second = Math.floor(self.time % 60) < 10 ? '0' + Math.floor(self.time % 60) : Math.floor(self.time % 60);
//倒計(jì)時(shí)執(zhí)行函數(shù)
self.countFunc(second, minute, hour, day);
self.time--;
}
}, 1000);
}
如果調(diào)用:
var time1 = new Alarm(startime, endtime, countFunc, endFunc); time1.start(); var time2 = new Alarm(startime, endtime, countFunc, endFunc); time2.start(); ...
調(diào)用示例:
var countTime = function () {
var eles = $('.count_time'),
len = eles.length;
for (; len > 0; len--) {
var ele = eles.eq(len - 1);
(function (ele) {
startTime = new Date(ele.attr('data-start-time')).getTime(),
endTime = new Date(ele.attr('data-end-time')).getTime(),
alarm = new Alarm(startTime, endTime, function (second, minute, hour, day) { //計(jì)時(shí)鐘
ele.text(hour + ':' + minute + ':' + second);
}, function () { //倒計(jì)時(shí)結(jié)束
ele.text('00:00:00');
window.location.reload();
});
alarm.start();
})(ele);
}
};
countTime();
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS 倒計(jì)時(shí)實(shí)現(xiàn)代碼(時(shí)、分,秒)
- JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
- 簡(jiǎn)單易用的倒計(jì)時(shí)js代碼
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- 2種簡(jiǎn)單的js倒計(jì)時(shí)方式
- js幾秒以后倒計(jì)時(shí)跳轉(zhuǎn)示例
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
- 一個(gè)不錯(cuò)的js html頁(yè)面倒計(jì)時(shí)可精確到秒
- Javascript倒計(jì)時(shí)代碼
- javascript倒計(jì)時(shí)效果代碼,可以方便參數(shù)調(diào)用
相關(guān)文章
JavaScript設(shè)計(jì)模型Iterator實(shí)例解析
這篇文章主要介紹了JavaScript設(shè)計(jì)模型Iterator實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
js實(shí)現(xiàn)同一頁(yè)面多個(gè)運(yùn)動(dòng)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)同一頁(yè)面多個(gè)運(yùn)動(dòng)效果的方法,涉及javascript操作頁(yè)面元素運(yùn)動(dòng)效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JS實(shí)現(xiàn)根據(jù)詳細(xì)地址獲取經(jīng)緯度功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)根據(jù)詳細(xì)地址獲取經(jīng)緯度功能,涉及javascript與百度地圖接口交互進(jìn)行地址經(jīng)緯度查詢的相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
Javascript Function對(duì)象擴(kuò)展之延時(shí)執(zhí)行函數(shù)
這篇文章主要介紹 在js里面怎么延時(shí)執(zhí)行一個(gè)函數(shù)?2010-07-07
基于bootstrap實(shí)現(xiàn)廣告輪播帶圖片和文字效果
這篇文章主要介紹了基于bootstrap實(shí)現(xiàn)廣告輪播帶圖片和文字效果,效果非常棒,需要的朋友可以參考下2016-07-07
uni-app基本的數(shù)據(jù)綁定v-bind,v-for,v-on:click詳解
這篇文章主要介紹了uni-app基本的數(shù)據(jù)綁定v-bind,v-for,v-on:click,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08

