可多次使用的Javascript倒计时计时器

Javascript countdown timer with multiple use

本文关键字：Javascript 倒计时 计时器      更新时间：2023-09-26

我有一个java脚本倒计时函数，它工作得很好，但总是只显示一个结果。我想要的是，就像在php中一样，我给出一个值(在我们的例子中是剩余的时间(，然后它开始倒计时。我想在同一页面上显示不同的倒计时计时器，但这似乎是一个比我想象的更大的问题，遗憾的是，我无法单独找到答案：/

这就是我使用的功能，有人能帮我修改它吗，这样我就能得到我想要的吗？

在这里的第一个答案之后，我仍然没有得到我想要的：(这是我已经尝试过的：

我的php函数：

function count_down_timer($time,$id) {
    echo "<script language='"JavaScript'"><!--
        var count = $time;
        var counter=setInterval(timer, 1000);
        function timer() {
            count=count-1;
            var h = Math.floor(count/3600);
            var m = Math.floor(count % 3600/60);
            if(h == 1) { var h_txt = h + ' hour'; } else if(h > 1) { var h_txt = h + ' hours'; } else { var h_txt = ''; }
            if(m == 1) { var m_txt = m + ' minute'; } else if(m > 1) { var m_txt = m + ' minutes'; } else { var m_txt = '< 1 minute'; }
            if(h > 0 && m > 0) { var and = ' and '; } else { var and = ''; }
            document.getElementById('"$id'").innerHTML = h_txt + and + m_txt;
        }
    //--></script>";
}

我的结果：

<?php
count_down_timer(1000,'timer');
count_down_timer(4000,'test');
?>
<span id="timer"></span><p>
<span id="test"></span>

两者给出的最新时间均为4000。

代码不起作用的原因是您只有一个名为count的全局变量。因此，在第二次调用count_down_timer()时，计时器值变为4000。如果要保留两个单独的计数，则应为计数变量指定不同的名称。

我也只回显您的javascript timer()函数一次。它不需要在每次运行时都得到响应。

此外，我会完全修改你的php函数，这样它所能做的就是：

<?php 
function count_down_timer($time,$id){
  echo "var ".$id."Count = $time;
  setInterval(function(){ 
    ".$id."Count = ".$id."Count - 1;
    timer(".$id."Count, '$id');
  }, 1000);";
}
?>

这样你就可以说：

 <?php 
   count_down_timer(1000, 'test');
   count_down_timer(4000, 'timer');
 ?>

这将是您最终输出的目标(我添加了计数器，只是为了让您可以看到它的工作(：

function timer(count, id) {
  var h = Math.floor(count / 3600);
  var m = Math.floor(count % 3600 / 60);
  var h_txt = '';
  var m_txt = '';
  if (h == 1) {
    h_txt = h + ' hour';
  } else if (h > 1) {
    h_txt = h + ' hours';
  }
  if (m == 1) {
    m_txt = m + ' minute';
  } else if (m > 1) {
    m_txt = m + ' minutes';
  } else {
    m_txt = '< 1 minute';
  }
  if (h > 0 && m > 0) {
    var and = ' and ';
  } else {
    var and = '';
  }
  document.getElementById(id).innerHTML = h_txt + and + m_txt + ' and count is ' + count;
}
var testCount = 1000;
setInterval(function() {
  testCount = testCount - 1;
  timer(testCount, 'test');
}, 1000);
var timerCount = 4000;
setInterval(function() {
  timerCount = timerCount - 1;
  timer(timerCount, 'timer');
}, 1000);
<span id="timer">
</span><p></p>
<span id="test"></span>

您可以创建一个数组来存储信息。数组的每个元素都有该计时器的跨度id和剩余时间。计时器将每秒递减每个计时器的剩余时间。

PHP页面需要在数组中打印一个元素，并为每个计时器打印一个跨度。

相关文章：