Javasacript倒计时计时器，以天、小时、分钟、秒为单位

Question

我试图创建一个基于时间的倒计时钟。它不是基于current_dates。将被拉取的初始时间将来自一个单独的php文件。这将是一个基于浏览器的游戏。当有人点击按钮来启动这个脚本。它将检查是否满足某些要求，如果满足，那么这个脚本将启动。根据对象的级别，它将拉动该进行中级别的初始计时器。希望这有意义。无论如何，我基于我提供的第一个代码的计时器脚本。

此脚本仅占分钟和秒。我对它进行了修改，使其也包括了天和小时。在这个过程中的某个地方，我把事情搞砸了，剧本根本就不起作用。我也不确定这是否是最好的计算方法。所以，如果你有一个更干净的方法，请分享。先谢谢你。

这个脚本是基于我看到的分钟/秒脚本。以下是原始来源：

<span id="countdown" class="timer"></span>
<script>
   var seconds = 60;
   function secondPassed() {
   var minutes = Math.round((seconds - 30)/60);
   var remainingSeconds = seconds % 60;
   if (remainingSeconds < 10) {
      remainingSeconds = "0" + remainingSeconds; 
   }
   document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
   if (seconds == 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "Buzz Buzz";
   } else {
    seconds--;
   }
   }
   var countdownTimer = setInterval('secondPassed()', 1000);
</script>

下面是我试图包含天、小时、分和秒的修改脚本。

<span id="countdown"></span>
<script>
     var current_level = 93578;

     function timer() {

        var days = Math.round(current_level/86400);
        var remainingDays = Math.round(current_level - (days * 86400));

        if (days <= 0){
             days = current_level;
        }

        var hours = Math.round(remainingDays/3600);
        var remainingHours = Math.round(remainingDays - (hours * 3600));

        if (hours >= 24){
             hours = 23;
        }

        var minutes = Math.round(remainingHours/60);
        var remainingMinutes = Math.round(remainingHours - (minutes * 60));

        if (minutes >= 60) {
             minutes = 59;
        }

        var seconds = Math.round(remainingMinutes/60);

        document.getElementById('countdown').innerHTML = days + ":" + hours ":" + minutes + ":" + seconds;

        if (seconds == 0) {
             clearInterval(countdownTimer);
             document.getElementById('countdown').innerHTML = "Completed";
        }
     }
     var countdownTimer = setInterval('timer()', 1000);
</script>

Answer 1

这是我的工作和测试的例子，基于你的代码

<span id="countdown"></span>
<script>
     var current_level = 3002;

     function timer() {

        var days = Math.floor(current_level/86400);
        var remainingDays = current_level - (days * 86400);

        //if (days <= 0){
        //    days = current_level;
        //}

        var hours = Math.floor(remainingDays/3600);
        var remainingHours = remainingDays - (hours * 3600);

        //if (hours >= 24){
        //     hours = 23;
        //}

        var minutes = Math.floor(remainingHours/60);
        var remainingMinutes = remainingHours - (minutes * 60);

        //if (minutes >= 60) {
        //     minutes = 59;
        //}

        var seconds = remainingMinutes;

        document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds;

        //if (seconds == 0) {
        //    clearInterval(countdownTimer);
        //     document.getElementById('countdown').innerHTML = "Completed";
        //}

        current_level--;
     }
     var countdownTimer = setInterval(timer, 1000);
</script>

Answer 2

就我个人而言，我会使用jQuery倒计时计时器集成。它很简单，有许多选项以不同的格式显示。因为我对JS也相当陌生，所以这是我发现的获得计数/计时器的最简单方法。

http://keith-wood.name/countdown.html

Answer 3

我终于重新审视了这一点，重新编写了代码，这就像一个符咒。

var upgradeTime = 172801;
var seconds = upgradeTime;
function timer() {
  var days        = Math.floor(seconds/24/60/60);
  var hoursLeft   = Math.floor((seconds) - (days*86400));
  var hours       = Math.floor(hoursLeft/3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  var minutes     = Math.floor(minutesLeft/60);
  var remainingSeconds = seconds % 60;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
  }
  document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "Completed";
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval('timer()', 1000);

<span id="countdown" class="timer"></span>