在PHP的foreach循环中创建一个JavaScript倒数计时器

我想创建一个使用我在W3Schools上找到的JavaScript代码的倒计时器。代码一直为我工作，但现在，我需要在一个php循环中创建一个定时器，该循环在页面中显示注释。这意味着javascript计时器代码必须对每个评论都是唯一的，并且我已经完成了我的感觉是正确的，但它不起作用。这是我有：在PHP的foreach循环中创建一个JavaScript倒数计时器

<?php 
$post_comments = $this->db->get_where('post_comments', array('display' => 'true'))->result_array(); 
foreach ($post_comments as $comment) { ?> 
    Expire time - <span id="cRemTime<?php echo $comment->id; ?>" style="color: red"> </span> 

    <?php 
    $comment_stop_time = date("M j, Y H:i:s", strtotime($comment->time. '+1 hours')); //timestamp from table + 1 hour 
    ?> 

    <script> 
    var ExhaustTime = "<?php echo $comment_stop_time; ?>"; 
    var countDownDate = new Date(ExhaustTime).getTime(); 
    var x = setInterval(function() { 
     var now = new Date().getTime(); 
     var distance = countDownDate - now;  
     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); 
     document.getElementById("cRemTime<?php echo $comment->id; ?>").innerHTML = hours + ": " + minutes + ": " + seconds; 
     if (distance < 0) { 
      clearInterval(x); 
      document.getElementById("cRemTime<?php echo $comment->id; ?>").innerHTML = "Exhausted!"; 
     }  
    }, 1000); 
    </script> 

<?php } ?>

我错过了什么？
注意：我使用代码点火器

来源

2017-09-22 Valkay

你看过输出的JavaScript代码，通过查看页面源代码？你在控制台中看到任何错误吗？ – WizardCoder

您定义的js变量（全部包括setInterval函数）都是全局变量，这意味着它们应该只存在一次。所以只有最后一个才是'有效的'。你可以像'span'一样伪造“命名空间” – Jeff

您定义的javascript变量（全部包括x = setInterval()）是全局的，这意味着它们应该只存在一次。所以只有最后一个才是'有效的'。你可以假'namespace”他们为你与跨度做同样的方式：

var ExhaustTime<?php echo $comment->id; ?> = "<?php echo $comment_stop_time; ?>"; 
// the same for countDownDate and x (the setInterval)

当然这不是一个完美的解决方案，但它会让它工作，我想。

一个优雅的解决方案将所有这些包装在一个类中或一个函数中，您可以在每个循环中传递参数。所以，你必须该对象只有一次，但把它在每一个循环（如一个初始化功能也许）

的这种原始的版本可能是这样的：
（未测试）

// OUTSIDE php foreach loop, so only once in a <script> 
function MyCounter(exhaustTime,elementId) { 

    // this.ExhaustTime = exhaustTime; // there's no need for that extra var 
     // you might want to check here if you got a valid exhaustTime (or later countDownDate). 

    this.countDownDate = new Date(exhaustTime).getTime(); 
    this.init = setInterval(function() { 
     var now = new Date().getTime(); 
     var distance = this.countDownDate - now;  
     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); 
     // better find that element only once and re-use it 
     var target = document.getElementById(elementId); 
     target.innerHTML = hours + ": " + minutes + ": " + seconds; 
     if (distance < 0) { 
      clearInterval(x); 
      target.innerHTML = "Exhausted!"; 
     }  
    }, 1000); 

} 

// inside your php foreach loop (and in a <script>) 
var Counter<?php echo $comment->id; ?> = new MyCounter(<?php echo $comment_stop_time; ?>, "cRemTime<?php echo $comment->id; ?>"); 
Counter<?php echo $comment->id; ?>.init();

对于进一步阅读：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS

来源

2017-09-22 22:15:38 Jeff

在PHP的foreach循环中创建一个JavaScript倒数计时器

回答

相关问题