基于jQuery的自定义倒计时
支持传入参数类型:时间类型,数字类型,其中数字类型区分时、分、秒。以下为js代码
参数 | 说明 |
---|---|
time | 日期类型,如: ‘2020-4-14 23:59’ |
endminute | 数字类型 如:15分 |
endsecond | 数字类型 如:15秒 |
endhour | 数字类型 如:15小时 |
msg | 时间结束后提示内容 如:活动已结束 |
var countDown = function(dome,time){
this.$dome = $(dome);
this.defaults = {
time:'',//日期类型
endminute:0,//数字类型 如15分
endsecond:0,//数字类型 如15秒
endhour:0,//数字类型 如15小时
msg:'00:00:00',//时间结束后提示内容
type:fase
}
this.confige = {
times:0,
day:'0',
hour:'0',
minute:'0',
second:'0',
timed:'',
timer:null
}
this.setting = $.extend({},this.defaults,time);
}
countDown.prototype = {
clearTimer:function(){//清除定时器
var that = this;
clearInterval(that.confige.timer);
},
Inintialize:function(){
var that = this;
if(that.setting.time && isNaN(that.setting.time)){
setInterval(()=>{
that.setTime()
},1000);
}else if(that.setting.endminute && typeof that.setting.endminute === 'number'){
that.confige.times = that.setting.endminute*60;
that.setminute();
}else if(that.setting.endsecond && typeof that.setting.endsecond === 'number'){
that.confige.times = that.setting.endsecond;
that.setsecond();
}else if(that.setting.endhour && typeof that.setting.endhour === 'number'){
that.confige.times = that.setting.endhour*60*60;
that.sethour();
}
},
setTime:function(){
var that = this;
/*倒计时为时间类型*/
if(that.setting.time && isNaN(that.setting.time)){
var now = (new Date()).getTime();
var date = new Date(that.setting.time);
var times = date.getTime();
if(times > now){
that.confige.times = (times-now)/1000;
if(that.confige.times > 0){
that.confige.day = Math.floor(that.confige.times / 60 / 60 / 24);
that.confige.hour = Math.floor(that.confige.times / 60 / 60 % 24)<10?"0"+Math.floor(that.confige.times / 60 / 60 % 24):Math.floor(that.confige.times / 60 / 60 % 24);
that.confige.minute = Math.floor(that.confige.times / 60 % 60)<10?"0"+Math.floor(that.confige.times / 60 % 60):Math.floor(that.confige.times / 60 % 60);
that.confige.second = Math.floor(that.confige.times % 60)<10?"0"+Math.floor(that.confige.times % 60):Math.floor(that.confige.times % 60);
if(that.confige.day > 0){
that.confige.timed = that.confige.day+'天 '+that.confige.hour+':'+that.confige.minute+':'+that.confige.second;
}else{
that.confige.timed = that.confige.hour+':'+that.confige.minute+':'+that.confige.second;
}
that.$dome.html(that.confige.timed);
}else{
that.$dome.html(that.setting.msg);
}
}else{
that.$dome.html('活动已结束');
}
}
},
sethour:function(){
var that = this;
that.confige.timer = setInterval(()=>{
/*倒计时为数字类型 此处为小时 必须*/
that.confige.times = that.confige.times - 1;
if(that.confige.times > 0){
that.confige.day = Math.floor(that.confige.times/60/60/24);
that.confige.hour = Math.floor(that.confige.times/60/60%24)<10?'0'+Math.floor(that.confige.times/60/60%24):Math.floor(that.confige.times/60/60%24);
that.confige.minute = Math.floor(that.confige.times/60%60)<10?'0'+Math.floor(that.confige.times/60%60):Math.floor(that.confige.times/60%60);
that.confige.second = Math.floor(that.confige.times%60)<10?'0'+Math.floor(that.confige.times%60):Math.floor(that.confige.times%60);
console.log(that.confige.day)
if(that.confige.day > 0){
that.confige.timed = that.confige.day+'天 '+that.confige.hour+':'+that.confige.minute+':'+that.confige.second;
}else{
that.confige.timed = that.confige.hour+':'+that.confige.minute+':'+that.confige.second;
}
that.$dome.html(that.confige.timed);
}else{
that.$dome.html(that.setting.msg);
}
},1000);
},
setminute:function(){
var that = this;
setInterval(()=>{
/*倒计时为数字类型 此处为分 必须小于60*/
that.confige.times = that.confige.times - 1;
if(that.confige.times > 0){
that.confige.minute = Math.floor(that.confige.times/60)<10?'0'+Math.floor(that.confige.times/60):Math.floor(that.confige.times/60);
that.confige.second = Math.floor(that.confige.times%60)<10?'0'+Math.floor(that.confige.times%60):Math.floor(that.confige.times%60);
that.confige.timed = '00:'+that.confige.minute+':'+that.confige.second;
that.$dome.html(that.confige.timed);
}else{
that.$dome.html(that.setting.msg);
}
},1000);
},
setsecond:function(){
var that = this;
setInterval(()=>{
/*倒计时为数字类型 此处为秒 必须小于60*/
that.confige.times = that.confige.times - 1;
if(that.confige.times > 0){
that.confige.second = Math.floor(that.confige.times%60)<10?'0'+Math.floor(that.confige.times%60):Math.floor(that.confige.times%60);
that.confige.timed = '00:00:'+that.confige.second;
that.$dome.html(that.confige.timed);
}else{
that.$dome.html(that.setting.msg);
}
},1000);
}
}
$.fn.countDown = function(time){
var con = new countDown(this,time);
return con.Inintialize();
}
调用方式1
HTML
<div id="endTime"></div>
js
<script type="text/javascript">
var times = {
time:'2020-4-14 23:59',//传入日期类型字符串
}
$('#endTime').countDown(times)
</script>
调用方式2
HTML
<div id="timer"></div>
js
<script type="text/javascript">
var times = {
time:'2020-12-24 23:59',//传入日期类型字符串
type:false
}
var coun = new countDown($('#timer'),times);
coun.Inintialize();
$('#timer').on('click',function(ev){
times.type = !times.type;
if(times.type){
coun.clearTimer();
}else{
coun.Inintialize();
}
})
</script>