js多个倒计时并存

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="time_1"></div> <div id="time_2"></div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> function countDown(time, fn) { var maxtime = (new Date(time) - new Date()) / 1000;//剩余秒 var timer = setInterval(function () { if (maxtime >= 0) { var dd = parseInt(maxtime / 60 / 60 / 24, 10);//计算剩余的天数 var hh = parseInt(maxtime / 60 / 60 % 24, 10);//计算剩余的小时数 var mm = parseInt(maxtime / 60 % 60, 10);//计算剩余的分钟数 var ss = parseInt(maxtime % 60, 10);//计算剩余的秒数 hh = checkTime(hh); mm = checkTime(mm); ss = checkTime(ss); msg = "剩余时间 " + dd + "天" + hh + "时" + mm + "分" + ss + "秒"; fn(msg); --maxtime; } else { clearInterval(timer); fn("已结束"); } }, 1000); } function checkTime(i) { if (i < 10) { i = "0" + i; } return i; }; </script> <script type="text/javascript"> countDown('2016-6-29 10:40:44', function (msg) { $('#time_1').text(msg); }); countDown('2015-5-29 10:40:44', function (msg) { $('#time_2').text(msg); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

到毫秒

//倒计时
 function countDown(time, fn) {
    var maxtime = (new Date(time) - new Date()) / 10;//剩余秒
    var timer = setInterval(function () {
      if (maxtime >= 0) {
            var dd = parseInt(maxtime /100/ 60 / 60 / 24, 10);//计算剩余的天数
            var hh = parseInt(maxtime /100/ 60 / 60 % 24, 10);//计算剩余的小时数
            var mm = parseInt(maxtime /100/ 60 % 60, 10);//计算剩余的分钟数
            var ss = parseInt(maxtime /100% 60, 10);//计算剩余的秒数
            var hm = parseInt(maxtime % 100, 10);//计算剩余的毫秒数
            hh = checkTime(hh);
            mm = checkTime(mm);
            ss = checkTime(ss);
            hm = checkTime(hm);
            msg = hh + ":" + mm + ":" + ss + ":" + hm;
            fn(msg);
            --maxtime;
          }
          else {
            clearInterval(timer);
            fn("已结束");
          }
        }, 10);
  }
  function checkTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  };

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="endTime" value="2019-3-22 16:00:00"></div> <div class="endTime" value="2016-3-22 12:00:00"></div> <div id="time_2"></div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> function countDown(time, fn) { var maxtime = (new Date(time) - new Date()) / 10;//剩余秒 var timer = setInterval(function () { if (maxtime >= 0) { var dd = parseInt(maxtime /100/ 60 / 60 / 24, 10);//计算剩余的天数 var hh = parseInt(maxtime /100/ 60 / 60 % 24, 10);//计算剩余的小时数 var mm = parseInt(maxtime /100/ 60 % 60, 10);//计算剩余的分钟数 var ss = parseInt(maxtime /100% 60, 10);//计算剩余的秒数 var hm = parseInt(maxtime % 100, 10);//计算剩余的毫秒数 hh = checkTime(hh); mm = checkTime(mm); ss = checkTime(ss); hm = checkTime(hm); msg = hh + ":" + mm + ":" + ss + ":" + hm; fn(msg); --maxtime; } else { clearInterval(timer); fn("已结束"); } }, 10); } function checkTime(i) { if (i < 10) { i = "0" + i; } return i; }; </script> <script type="text/javascript"> $('.endTime').each(function(){ var obj = $(this); var endTime = obj.attr('value'); countDown(endTime,function(msg){ obj.text(msg); }); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » js多个倒计时并存