使用Javascript更改单个到多个倒数计时器

时间:2017-09-27 07:41:32

标签: javascript timer countdowntimer

嗨,伙计们,我的计时器有问题,单个计时器工作正常,但当我将它转换成多个计时器,计时器不工作有人可以帮助我,谢谢你

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

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>

1 个答案:

答案 0 :(得分:1)

只需将现有代码包装到方法中,然后将元素ID传递给它。

<强>演示

&#13;
&#13;
library(reshape)
library(ggplot2)

#sample data    
demo <- read.table(header = TRUE,
                   text ="var1 var2
                   Good Excellent
                   Subpar Good
                   Excellent Decent
                   Good Good
                   Subpar Subpar")

#pre-processing
df <- merge(melt(table(demo$var1)), melt(table(demo$var2)), by='Var.1', all=T)
colnames(df) <- c("Words", "Var1", "Var2")
df[is.na(df)] <- 0
df <- melt(df, id=c("Words"))
colnames(df) <- c("Words", "Column_Name", "Count")

#plot
ggplot(df, aes(x=Words, y=Count, fill=Column_Name)) +
  geom_bar(position="dodge", stat="identity")
&#13;
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);
}
&#13;
&#13;
&#13;