在 Javascript 中为倒数计时器制作动画

Animating a countdown timer in Javascript

本文关键字：动画 计时器 倒数 Javascript      更新时间：2023-09-26

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

该函数正在工作，但它只是以文本形式显示剩余的时间。我想做一个倒计时的"条形图"（想想：列）（所以，如果测验给你 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 变量，因此似乎应该这样做，因为高度设置为 100/总秒 * 时间流逝。重申一下，由于计时器将运行 7 秒，我希望它每过一秒就变小 1/7。

知道我哪里出错了吗？

我认为你的高度计算逻辑不正确

它应该是

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

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

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

这意味着您需要

  • 获取timePassed与totalSeconds的比率
  • 然后从该比率中获取百分比
  • 以便您可以从100中减少该百分比值
相关文章：