javascript - 使用 Javascript 将单个倒数计时器更改为多个倒数计时器

Question

大家好，我的计时器有问题，单个计时器工作正常，但是当我将其转换为多个计时器时，计时器无法工作有人可以帮助我吗，谢谢

我添加了一个正在运行的计时器片段 提前致谢! :)

P.S 我不能在这部分使用 Jquery，所以它非常具有挑战性。

// value came here $time_end = sprintf('%013.0f', microtime(true)*1000 + 27000000); 30 minuts timer
var countDownDate = "1506509439553";

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("timer_1").innerHTML = minutes + ":" + seconds + "";
  //id is dynamic timer_<?php echo get_the_ID();?>

  // If the count down is over, write some text 
  if (distance <= 0) {
    clearInterval(x);
    document.getElementById("timer_1").style.display = "none";
  }
}, 1000);

<div id="timer_1"></div>

Answer 1

只需将现有代码包装到一个方法中，并将元素 id 传递给它即可。

演示

startTimer( "timer_1" );
startTimer( "timer_2" );
startTimer( "timer_3" );

function startTimer(elementId) {
  // value came here $time_end = sprintf('%013.0f', microtime(true)*1000 + 27000000); 30 minuts timer
  var countDownDate = "1506509439553";

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById( elementId ).innerHTML = minutes + ":" + seconds + "";
    //id is dynamic timer_<?php echo get_the_ID();?>

    // If the count down is over, write some text 
    if (distance <= 0) {
      clearInterval(x);
      document.getElementById( elementId ).style.display = "none";
    }
  }, 1000);
}

<div id="timer_1"></div>
<div id="timer_2"></div>
<div id="timer_3"></div>