Question

我的项目目前提供测验，其中有一个使用Javascript的倒数计时器。然后，此时间在完全倒计时或用户选择多项选择答案后重置为7秒。

该功能正在运行，但它只显示了文本剩余的时间。我想制作一个倒计时的“bar”（想想：列）（因此，如果一个测验给你7秒，那么每次减少1/7）。 jQuery和Javascript似乎是最简单的方法，所以我补充道：

var height = 50;
var timePassed = 0;
var totalSeconds = 7;

var reduceHeight = function(elem, totalSeconds){
timePassed++;
height = 100 - (100/totalSeconds * timePassed);
elem.css({height: height + "%"});
if(height > 0){
  window.setTimeout(function(){
  reduceHeight(elem, totalSeconds)
  }, 1000)
  }
  }

$(document).ready(function(){
  var inner = $('#inner');
  reduceHeight(inner, 20);
  });

栏现在出现并倒数，但它没有以正确的速率完成reduceHeight。

因为我定义了totalSeconds变量，所以它似乎应该是因为height被设置为100 / totalSeconds * timePassed。重申一下，由于计时器将运行7秒钟，我希望它在每一秒钟内变小1/7。

知道我哪里出错了吗？

Answer 1

我认为您的身高计算逻辑不正确

应该是

height = 100 - ( ( timePassed/totalSeconds ) * 100 );

因为例如totalSeconds是20而timePassed是10 那你的身高应该是50，

height = 100 - ( ( 10/20 ) * 100 ) = 50;

这意味着你需要

获得timePassed与totalSeconds
然后从该比率中获得百分比
以便您可以从100

在Javascript中设置倒计时器的动画

1 个答案: