JavaScript 计时器不会每秒更新
P粉340980243
P粉340980243 2024-04-02 19:04:44
[JavaScript讨论组]

这是我的代码,用于显示 otp 的倒计时器,但它仅显示静态值,并且不会像预期那样每秒更新。

<?php 
// Set the target end time (in this example, 10 minutes from now) 
$endTime = time() + (10 * 60);  
 
// Calculate the remaining time 
$remainingTime = $endTime - time(); 
 
// Display the remaining time 
echo "<span id='countdown'></span>"; 
 
?> 
 
<script> 
// Display the remaining time in minutes and seconds 
function displayCountdown() { 
  var remainingTime = <?php echo $remainingTime; ?>; 
  var minutes = Math.floor(remainingTime / 60); 
  var seconds = remainingTime - (minutes * 60); 
  document.getElementById("countdown").innerHTML = minutes + "m " + seconds + "s"; 
  remainingTime--; 
  if (remainingTime < 0) { 
    clearInterval(interval); 
    document.getElementById("countdown").innerHTML = "Time's up!"; 
  } 
} 
var interval = setInterval(displayCountdown, 1000); 
</script>

请指出我缺少什么。

P粉340980243
P粉340980243

全部回复(1)
P粉376738875

请记住,PHP 代码在服务器上执行 - 并且不会影响 JS(“浏览器时间”)执行。您的 JS 函数实际上如下所示:

在这里,问题立即可见:您仅在单次运行 displayCountdown 函数期间递减 remainingTime 。下次调用时,该值再次为 600 - 因为 remainingTime 变量是本地的。

因此,最直接的解决方案是将该变量移到 displayCountdown 范围之外,如下所示:

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号