分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

js倒计时组件

发布时间:2023-09-06 01:30责任编辑:顾先生关键词:js组件

适用于一个页面里有多个相同倒计时的情况:

function countDownFun(option){ ???if (!option.countDownEle || !option.price || !option.endDate || !option.specialPriceEle ) return false; ???????this.countDownEle = option.countDownEle; ???//获得显示倒计时的元素 ???this.price = option.price; ???this.endDate = option.endDate; ???this.specialPriceEle = option.specialPriceEle; ???this.t = 0; ???}countDownFun.prototype = { ???init : function(){ ???????var nowTime = Date.parse(new Date()); ????????this.t = this.endDate - nowTime; ???}, ???getTimeDiff : function(){ ???????var shijiancha = this.t; ???????if (shijiancha > 0) { ???????????/*d=Math.floor(t/1000/60/60/24); ???????????h=Math.floor(t/1000/60/60%24); ???????????m=Math.floor(t/1000/60%60); ???????????s=Math.floor(t/1000%60);*/ ???????????var days ???= shijiancha / 1000 / 60 / 60 / 24; ???????????var daysRound ??= Math.floor(days); ???????????var hours ???= shijiancha/ 1000 / 60 / 60 - (24 * daysRound); ???????????var hoursRound ??= Math.floor(hours); ???????????var minutes ??= shijiancha / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound); ???????????var minutesRound ?= Math.floor(minutes); ???????????var seconds ??= shijiancha/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound); ???????????//console.log(seconds); ???????????//console.log(oridays+‘-‘+hours+‘-‘+minutes+‘-‘+seconds); ???????????this.countDownEle.innerHTML = daysRound + "日" + hoursRound + "时" + minutesRound + "分" + seconds + "秒"; ???????????//this.countDownEle.html(this.t); ???????} else { ???????????clearInterval(this.timeObj); ???????????this.specialPriceEle.innerHTML = this.price;; ???????} ???}, ???????tick : function(){ ???????var self = this; ???????this.timeObj = setInterval(function(){ ???????????self.getTimeDiff(); ???????????self.t = self.t - 1000; ???????},1000); ???}}

使用:

var countDownArr = [];var oList = document.querySelectorAll(".video-price");var oListLength = oList.length;for (var x=0;x < oListLength;x++){ ???var option = { ???????????countDownEle : oList[x].querySelector(".countdown"), ???????????price: oList[x].getAttribute("price"), ???????????endDate : parseInt(oList[x].getAttribute("endDate")), ???????????specialPriceEle : oList[x].querySelector(".specialPrice"), ???} ???countDownArr[x] = new countDownFun(option); ???countDownArr[x].init(); ???countDownArr[x].tick();}

使用部分的代码不用细读,原理就是,生成参数option,然后实例化,然后调用init方法和tick方法就可以了。

效果:

js倒计时组件

原文地址:http://www.cnblogs.com/doubilaile/p/8021892.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved