页面多个倒计时

Html

Css

* {
	padding:0;
	margin:0;
}
body {
	font-size:16px;
}
.timeBox {
	color:#6dbec5;
	margin:10px auto;
}
.timeBox2 {
	color:#12ae53;
	margin:10px auto;
}
.time {
	border:1px solid #6dbec5;
	width:40px;
	height:20px;
	text-align:center;
	line-height:20px;
	display:inline-block;
}

var endtime,nowtime,lefttime,d,h,m,s;
var sh;
$.fn.countDown = function(_boolean,_this){
    var sh = [];
    // var _this = $(this);
    _this.each(function(index, el){

var thisObj = $(this);
    sh[index]=setInterval(function(){
        var times = thisObj.data("times");//获得timeBox的data值，即结束时间
        endtime = new Date(times);//把data值转换成时间
        nowtime = new Date();//获得当前时间
        lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); //结束时间-当前时间得到毫秒数，再除以1000得到两个时间相差的秒数
        if(_boolean){
            d=parseInt(lefttime/3600/24);
            h=parseInt((lefttime/3600)%24);
        }else{
            d=parseInt(lefttime/3600/24)*24;
            h=parseInt((lefttime/3600)%24)+d;
        }

m=parseInt((lefttime/60)%60);
        s=parseInt(lefttime%60);
        if(endtime.getTime() <= nowtime.getTime()){
            d = h = m = s = "0";
            clearInterval(sh[index]);
        }
        // 三目运算符
        d = d < 10 ? "0"+ d : d;
        h = h < 10 ? "0"+ h : h;
        m = m < 10 ? "0"+ m : m;
        s = s < 10 ? "0"+ s : s;

if(_boolean){
            thisObj.find(".date").text(d);
        }

thisObj.find(".hour").text(h);
        thisObj.find(".minutes").text(m);
        thisObj.find(".seconds").text(s);

if(lefttime<=0){
            d = h = m = s = "00";
            clearInterval(sh[index]);
        }
    },1000);
    });
}

// 调用

$(".timeBox").countDown(true,$(".timeBox"));
$(".timeBox2").countDown(false,$(".timeBox2"));

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

页面多个倒计时



代码描述：jQuery倒计时代码

在项目实践中，有时候项目需要天数+时分秒的倒计时，有时候则只需要时分秒的。所以针对这情况，传一个值进行判断，true表示需要天数，false则表示只需要时分秒的，同时会把天数转换成小时叠加起来。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

L℃

相关代码

页面多个倒计时

最新