页面多个倒计时代码,Js代码库,德仔网

代码语言
代码分类
【Js】页面多个倒计时
作者:明蔚 / 发布于2016/6/20/ 920
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
    <title>按时分秒</title>
    <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
    <style type="text/css">
        *{padding:0;margin:0;}
        body{font-size:16px;}
        .timeBox{color:#6dbec5;margin:10px auto;}
        .time{border: 1px solid #6dbec5;width: 40px;height: 20px;text-align: center; line-height: 20px;display: inline-block;}
    </style>
</head>
<body>
 
    <div class="timeBox" data-times="2016/06/30,23:59:59">
        距结束
        <span class="time date">00</span> 天 <span class="time hour">00</span> : <span class="time minutes">00</span> : <span class="time seconds">00</span>
    </div>
    <div class="timeBox" data-times="2016/06/25,20:20:20">
        距结束
        <span class="time date">00</span> 天 <span class="time hour">00</span> : <span class="time minutes">00</span> : <span class="time seconds">00</span>
    </div>
</body>
<script type="text/javascript">
var endtime,nowtime,lefttime,d,h,m,s;
$.fn.countDown = function(){
    var _this = $(this);
    _this.each(function(index, el){
        var thisObj = $(this);
        var times = thisObj.data("times");//获得timeBox的data值，即结束时间
        endtime = new Date(times);//把data值转换成时间
        nowtime = new Date();//获得当前时间
        lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); //结束时间-当前时间得到毫秒数，再除以1000得到两个时间相差的秒数
        d=parseInt(lefttime/3600/24);
        h=parseInt((lefttime/3600)%24);
        m=parseInt((lefttime/60)%60);
        s=parseInt(lefttime%60);
        // 三目运算符
        d = d < 10 ? "0"+ d : d;
        h = h < 10 ? "0"+ h : h;
        m = m < 10 ? "0"+ m : m;
        s = s < 10 ? "0"+ s : s;
 
        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);
        }
    });
}
 
var sh;
// 调用
sh=setInterval(function(){
    $(".timeBox").countDown();
},1000);
</script>
</html>
试试其它关键字
　倒计时　
同语言下
可能有用的
明蔚贡献的其它代码(9)