javascript倒计时器 - 需要第二个数字

时间:2014-11-12 23:06:18

标签: javascript jquery

我收到了一条现有的javascript,并要求我的老板修改它 - 麻烦的是,我根本不知道我的方式 - 我们的后端开发人员意外退出,我只是想帮助出。

我需要这样才能使倒数计时器始终显示两位数(01而不是1)。我在这里搜索并尝试了一些类似的问题解决方案,但是它们都是针对个别问题的,而且我根本没有运气使用if else if语句(部分因为我的理解和语法都不好。)希望对于知道自己在做什么的人来说,这很容易解决!提前谢谢。



<script>
// creating a reusable CountDownTimer class with TargetDate

/*
 targetDate = Expiration date
 displayCountDownOnElement = on what element you need the countdown displayed at.
 hideOnExpire = on what element you need to hide when it expires.
*/
  var CountDownTimer = function(targetDate, displayCountDownOnElement, hideOnExpire){
  var target_date  = new Date(targetDate).getTime();
  var countdown = document.getElementById(displayCountDownOnElement);
  var hideExpire = document.getElementById(hideOnExpire);
  
  // variables for time units
  var days, hours, minutes, seconds;
  
  
  timer();
  setInterval(timer, 1000);
  function timer() {
 
      // find the amount of "seconds" between now and target
      var current_date = new Date().getTime();
      var seconds_left = (target_date - current_date) / 1000;

      // do some time calculations
      days = parseInt(seconds_left / 86400);
      seconds_left = seconds_left % 86400;

      hours = parseInt(seconds_left / 3600);
      seconds_left = seconds_left % 3600;

      minutes = parseInt(seconds_left / 60);
      seconds = parseInt(seconds_left % 60);

      // format countdown string + set tag value
      countdown.innerHTML = days + " : " + hours + " : "
      + minutes + " : " + seconds + " ";  
    
      if(seconds_left < 0) { 
        hideExpire.style.display = "none";
        countdown.innerHTML = "";
      }
    
  }
}


// Sample Timer to Dec. 1, 2014 1:30:00 PM 
var c = new CountDownTimer("Dec 1, 2014 1:30:00 PM GMT -0800","cyber-timer", "cyber-timer");

</script>
&#13;
&#13;
&#13;

在这里演示:http://codepen.io/anon/pen/YPzwQg

3 个答案:

答案 0 :(得分:1)

只需添加:

  if(days < 10){days = "0" + days;}
  if(hours < 10){hours = "0" + hours;}
  if(minutes < 10){minutes = "0" + minutes;}
  if(seconds < 10){seconds = "0" + seconds;}

之前:

  // format countdown string + set tag value
  countdown.innerHTML = days + " : " + hours + " : "
  + minutes + " : " + seconds + " "; 

答案 1 :(得分:1)

你走了。我添加了一个函数来将数字转换为2位数字符串,如果值为&lt; 10。

演示:http://jsfiddle.net/biz79/hh13ewLa/

编辑1:

countdown.innerHTML = makeTwoDigit(days) + " : " + makeTwoDigit(hours) + " : "
  + makeTwoDigit(minutes) + " : " + makeTwoDigit(seconds) + " ";  

编辑2:

function makeTwoDigit(num) {
  if (num < 10) {
    return "0" + num;
  }
  return num;
}

新来源:

//使用TargetDate

创建可重用的CountDownTimer类
/*
 targetDate = Expiration date
 displayCountDownOnElement = on what element you need the countdown displayed at.
 hideOnExpire = on what element you need to hide when it expires.
*/
  var CountDownTimer = function(targetDate, displayCountDownOnElement, hideOnExpire){
      var target_date  = new Date(targetDate).getTime();
      var countdown = document.getElementById(displayCountDownOnElement);
      var hideExpire = document.getElementById(hideOnExpire);

      // variables for time units
      var days, hours, minutes, seconds;


      timer();
      var interval = setInterval(timer, 1000);  // give interval a reference

      function timer() {

          // find the amount of "seconds" between now and target
          var current_date = new Date().getTime();
          var seconds_left = (target_date - current_date) / 1000;

          // do some time calculations
          days = parseInt(seconds_left / 86400);
          seconds_left = seconds_left % 86400;

          hours = parseInt(seconds_left / 3600);
          seconds_left = seconds_left % 3600;

          minutes = parseInt(seconds_left / 60);
          seconds = parseInt(seconds_left % 60);

          // format countdown string + set tag value
          countdown.innerHTML = makeTwoDigit(days) + " : " + makeTwoDigit(hours) + " : "
          + makeTwoDigit(minutes) + " : " + makeTwoDigit(seconds) + " ";  

          if(seconds_left < 0) { 
            hideExpire.style.display = "none";
            countdown.innerHTML = "";
            clearInterval(interval);  // clears interval 
          }

      }
        function makeTwoDigit(num) {
          if (num < 10) {
            return "0" + num;
          }
          return num;
        }
}



// Sample Timer to Dec. 1, 2014 1:30:00 PM 
var c = new CountDownTimer("Dec 1, 2014 1:30:00 PM GMT -0800","cyber-timer", "cyber-timer");

答案 2 :(得分:0)

function formatToLeadingZero(num) {
  if (num < 10) {
    return "0" + num;
  } 
  else {
    return num;
  }
}

所以你可以像

一样
countdown.innerHTML = formatToLeadingZero(days) + " : " + formatToLeadingZero(hours) + " : "
                      + formatToLeadingZero(minutes) + " : " + formatToLeadingZero(seconds) + " "; 

这仅适用于1或2位数的正数...因此请务必进行测试