Javascript倒数计时器可多次使用

傲慢的

我有一个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的最新时间。

ForOhFor

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

我也只会回显您的javascripttimer()函数一次。不需要每次运行它时都回显它。

另外,我将完全修改您的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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章