Question

function timer(time,max) {
   if(time-1>=0) {
     --time;
       $("#timer2").html(Math.ceil(time/100));
          pix = Math.round((time/max)*100);
   document.getElementById('timer').style.width = pix+"%";
  setTimeout("timer("+time+","+max+")",10);
  }
 }

那是Javascript。

 You have <font style='color: #ff0' id='timer2'><?PHP echo $time; ?></font> seconds left until you can skill again<br>
<div style='background-color: black; width: 100px;'>
    <div style='background-color: #ffd700; text-align: center; width: 100%' id='timer'>&nbsp;
    </div>
</div>
<script>
    timer(<?PHP echo $time*100; ?>,<?PHP echo $time*100; ?>);
</script>

基本上，时间可以是X秒。计时器每10毫秒运行一次，因此条形平滑。问题是，当你离开那个标签时，它会停止移动。有没有办法治愈这个代码来做到这一点？

谢谢！

Answer 1

如果您已经使用jQuery，请查看jQuery timer插件。

Answer 2

在现代浏览器中，当选项卡处于非活动状态时，超时和间隔会受到限制，因此当选项卡处于非活动状态时，您的计时器功能仅每秒触发一次，而不是每秒触发100次。

要解决此问题，您需要存储动画开始的时间（Date.now()），然后每当你的计时器功能触发时，你将检查当前时间，计算自动画开始以来经过了多长时间，然后根据自启动以来经过的时间量为元素设置动画。

示例（jsfiddle）

timer = function(max) {
    if (timer.start === undefined) timer.start = Date.now();
    if (timer.max === undefined) timer.max = max;

    var max = timer.max,
        elapsed = Date.now() - timer.start,
        left = Math.max(max - elapsed, 0),
        pctLeft = Math.min(left/max, 1);

    $('#timer2').html(Math.ceil(left/1000));
    $('#timer').css('width', pctLeft * 100 + '%');

    if (left > 0) setTimeout(timer, 30);
    else timer.start = timer.max = undefined;
 }

timer(5000);

选项卡未激活时如何使其继续运行？

2 个答案: