在Javascript中動畫使用倒數計時器

我的項目目前具有測驗功能，其中有一個使用Javascript的倒數計時器。這一次在完全倒計時之後重置爲7秒，或者用戶選擇多選答案。在Javascript中動畫使用倒數計時器

該功能正在工作，但它只是顯示文本中剩下多少時間。我想製作一個倒計時的「酒吧」（想想：列）（所以，如果一個測驗給你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/totalSeconds * timePassed。重申一次，因爲計時器將持續7秒，我希望它在每一秒中都變小1/7。

任何想法，我哪裏出錯了？

來源

2016-01-22 darkginger

的setTimeout減少百分比值將不能保證它反過來會在1秒鐘內，它將在1秒內完成執行。使用日期時間邏輯而不是計數器。 – gurvinder372

我認爲你的身高計算邏輯是不正確

應該

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

因爲例如totalSeconds是20和timePassed是10 ，那麼你的高度應爲50，

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

這意味着您需要

得到timePassed與totalSeconds
，然後比得到的百分比超出這個比例的
，這樣就可以從100

來源

2016-01-22 05:35:21 gurvinder372

在Javascript中動畫使用倒數計時器

回答

相關問題