需要帮助将“天”添加到此jquery倒计时器[关闭]

Question

I currently have a countdown timer that shows hours, mins, seconds. But now I would like to add "days" to it. Can you please show me how you would do that?

Here's the code. I left out the php db query as it's not important.

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
}

?>

</div>

Answer 1

Try this

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"));
    }
  }
}

Add days container on your loop

<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/