需要帮助将 "days" 添加到 jquery 倒数计时器

Question

我目前有一个倒计时器，可以显示小时、分钟、秒。但是现在我想给它添加 "days" 。你能告诉我你会怎么做吗？

这是代码。我省略了 php 数据库查询，因为它不重要。

function Timer(container, timeLeft) {
  // get hour, minute and second element using jQuery selector
  var hoursContainer = $(container).find('.hour');
  var minsContainer  = $(container).find('.min');
  var secsContainer  = $(container).find('.sec');
   
  // hold time left
  var currentTimeLeft = timeLeft;
  // 1 second = 1000 ms
  var secondsForTimer = 1000;  
  // hold ID value return by setInterval()
  var timerInterval;
  
  // call setInteval() only when timeLeft is greater than 0
  if (currentTimeLeft == 0) {
   return;
  } else {
   //Call setInterval()function and store ID value to timerInterval. 
   timerInterval = setInterval(countdown, secondsForTimer);
  }
  
  //function being passed to setInterval()
  function countdown() {
    currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer);    
    if (currentTimeLeft == 0) {
       //stop calling countdown function by calling clearInterval()
       clearInterval(timerInterval);
       return;
    } else {     
       //calculate hours left
       var wholeSeconds = parseInt(currentTimeLeft / 1000,10);
       var wholeMinutes = parseInt(currentTimeLeft / 60000,10);
       var wholeHours   = parseInt(wholeMinutes / 60,10);
       //calculate minutes left
       var minutes = parseInt(wholeMinutes % 60,10);
       //calculate seconds left
       var seconds = parseInt(wholeSeconds % 60,10);
       //prefix 0 to hour, min and second counter
       $(hoursContainer).text((wholeHours < 10 ? "0" : "") + wholeHours + (wholeHours <=0 ? " hr" : " hrs"));
       $(minsContainer).text((minutes < 10 ? "0" : "") + minutes  + (minutes <=0 ? " min" : " mins"));
       $(secsContainer).text((seconds < 10 ? "0" : "") + seconds  + (seconds <=0 ? " sec" : " secs"));
    }
  }
}

<?php 

// db query here to get the expiry time from the database
foreach($results as $k => $row) {

  $expiry_date    = $row['expiry_date'];

  $timeLeft = (strtotime($expiry_date) - time()) * 1000; 
  $counterName = "counter_$k";

  ?>
  <div class="counter <?php echo $counterName; ?>"> 
    <span class="hour">00</span>
    <span class="min">00</span>
    <span class="sec">00</span>
  </div>

  <script>

    // initiate new timer
    var timer = new Timer($('.<?php echo $counterName; ?>'), <?php echo $timeLeft; ?>);

  </script>

<?php
}

?>

Answer 1

试试这个

function Timer(container, timeLeft) {
  // get hour, minute and second element using jQuery selector
  var daysContainer = $(container).find('.day');
  var hoursContainer = $(container).find('.hour');
  var minsContainer  = $(container).find('.min');
  var secsContainer  = $(container).find('.sec');

  // hold time left
  var currentTimeLeft = timeLeft;
  // 1 second = 1000 ms
  var secondsForTimer = 1000;  
  // hold ID value return by setInterval()
  var timerInterval;

  // call setInteval() only when timeLeft is greater than 0
  if (currentTimeLeft == 0) {
      return;
  } else {
      //Call setInterval()function and store ID value to timerInterval. 
      timerInterval = setInterval(countdown, secondsForTimer);
  }

  //function being passed to setInterval()
  function countdown() {
    currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer);    
    if (currentTimeLeft == 0) {
       //stop calling countdown function by calling clearInterval()
       clearInterval(timerInterval);
       return;
    } else {        
       //calculate hours left
       var wholeSeconds = parseInt(currentTimeLeft / 1000,10);
       var wholeMinutes = parseInt(currentTimeLeft / 60000,10);
       var wholeHours   = parseInt(wholeMinutes / 60,10);
       var wholeDays   = parseInt(wholeHours / 24,10);
       //calculate hours left
       var hours = parseInt(wholeHours % 24,10);
       //calculate minutes left
       var minutes = parseInt(wholeMinutes % 60,10);
       //calculate seconds left
       var seconds = parseInt(wholeSeconds % 60,10);
       //prefix 0 to hour, min and second counter
       $(daysContainer).text((wholeDays < 10 ? "0" : "") + wholeDays + (wholeDays <=0 ? " day" : " days"));
       $(hoursContainer).text((hours < 10 ? "0" : "") + hours + (hours <=0 ? " hr" : " hrs"));
       $(minsContainer).text((minutes < 10 ? "0" : "") + minutes  + (minutes <=0 ? " min" : " mins"));
       $(secsContainer).text((seconds < 10 ? "0" : "") + seconds  + (seconds <=0 ? " sec" : " secs"));
    }
  }
}

在循环中添加天数容器

<div class="counter <?php echo $counterName; ?>">   
    <span class="day">00</span>
    <span class="hour">00</span>
    <span class="min">00</span>
    <span class="sec">00</span>
</div>

Fiddle: https://jsfiddle.net/otezz/68d9yb6v/1/

需要帮助将 "days" 添加到 jquery 倒数计时器

Need help adding "days" to this jquery countdown timer

php

database

jquery

timer

countdown