顯示計時器倒計時

在我的遊戲中，我將計時器設置爲30000ms（30秒）。當計時器結束時，遊戲結束。我想向用戶展示計時器，讓他們知道他們離開了多久。我怎麼會做這個，我試圖做這樣的：顯示計時器倒計時

setTimeout(function() { 
        $("#message").html('Thank you for playing. </br> You answered </br>' + hit + '/' + attempted + ' correctly. </br> Press "Play" to start again.').fadeIn('slow'); 
        $(".character").fadeIn('slow'); 
       }, 500); 
      }); 
     }, 30000).show('#timer'); //here I am trying to display the time in the "#timer" 
    }

我想我接近這一切錯誤可以有人給我的方向是正確的呢？

小提琴：http://jsfiddle.net/cFKHq/8/

來源

2012-10-23 Milo-J

'setTimeout'不是什麼jQuery，所以不要總是用jQuery的方式來思考。 –

代碼是這個問題拋出一個錯誤。 –

有一個在這jsFiddle甘德。您只需要將您的timeout更改爲interval並保持秒數。

來源

2012-10-23 13:33:30 BeRecursive

就是這樣，謝謝。我正在考慮添加圖標，這可能會增加或耗費用戶的時間。我將如何納入這個？ @BeRecursive –

只需使圖標顯示爲您所做的數字，但在onclick中您只需從計數器變量中加/減。可能需要添加一個檢查以確保數字不會變成負數。 – BeRecursive

聽起來很簡單，再次感謝@BeRecursive –

而是同時運行所有30000的計時器，運行計時器1000ms的增量。每次命中時，從計數器中減去1，刷新頁面，如果計數器爲0，則結束遊戲。

來源

2012-10-23 13:19:16

我無法刷新頁面，它是一個遊戲，並會重新啓動它。我只需要一種方法來顯示時間不斷下去@Ben Barden –

請原諒我。我不清楚。我不是說「刷新頁面」，如「告訴頁面重新加載」。我正在說「刷新頁面」，如「確保櫃檯正確更換帖子」一樣。例如，隱藏/顯示定時器段。 –

下面是一個例子：http://jsfiddle.net/RPSMJ/4/

的JavaScript

var counter = 30, 
    timerOutput = document.getElementById('timerOutput'); 
(function timer() { 
    timerOutput.innerHTML = counter; 
    counter -= 1; 
    if (counter >= 0) { 
     setTimeout(function() { 
      timer(); 
     }, 1000); 
    } 
}());

HTML

<div id='timerOutput'></div>

來源

2012-10-23 13:24:23

我無法讓它工作。你的小提琴應該顯示的東西，因爲它不@Minko Gechev –

我的代碼顯示你倒數計時器。我明白你需要那個。最好的問候:) –

我這樣做，但它不工作。你使用的是什麼瀏覽器？ @Minko Gechev –

我改變了你發佈到顯示推播放按鈕後，計數器的jsfiddle。見http://jsfiddle.net/cFKHq/10/

裏面你的函數startplay()我加一個變量ttime與30的初始值和我說行$("#timer").text(--ttime);到被稱爲每一秒的setInterval參數功能。

來源

2012-10-23 13:33:13 halex

查看使用增量時間。我發現這是處理需要衡量時間變化的事情的好方法。

prevTime = curTime; 
curTime += new Date(); 
deltaTime = curTime - prevTime;

這也將讓你，如果你火了一個事件每1秒，甚至每100ms有計數器「其餘的X秒」。一切都取決於你想要多快。

來源

2012-10-23 13:34:00 Tank

您可以使用全局window.duration變量是你在「一秒」的時間間隔設置秒的比賽將持續，則遞減：

見工作demo

在腳本的開始：

var hit = 0; 
var attempted = 0; 
var target = $("#target"); 
window.cont = true; 
window.duration = 30; //set your desired game duration in seconds

然後在「間隔一秒」我們遞減計時器和打印計時器文本：

 play = setInterval(function() { 
     if (window.cont) { 
      window.cont = false; 
      scramble(); 
     } 
     window.duration--; 
     $('#timer').html(window.duration + ' seconds to go'); 
    }, 1000);

當遊戲結束時也會顯示「已完成」的文本，相關部分如下：

setTimeout(function() { 
        $("#message").html('Thank you for playing. </br> You answered </br>' + hit + '/' + attempted + ' correctly. </br> Press "Play" to start again.').fadeIn('slow'); 
        $(".character").fadeIn('slow'); 
        $('#timer').html('Finished'); 
       }, 500);

來源

2012-10-23 13:35:50 Nelson

你需要「遊戲結束」的邏輯從單獨的定時器邏輯，作爲定時器應不分打勾：

var secondsLeft = 30; 
var timerElement = $('#timer'); 

(function timer() { 
    timerElement.text(secondsLeft); 
    secondsLeft--; 

    if (secondsLeft !== 0) { 
     setTimeout(function() { 
      timer(); 
     }, 1000); 
    } 
}());

http://jsfiddle.net/cFKHq/14/

注意，在這種溶液中的30 * 1秒定時器倒計時和遊戲30秒是不相關的或依賴於彼此，其可以ç如果用戶在慢速機器上，則會引起一些同步問題。

來源

2012-10-23 13:47:14 jbabey

顯示計時器倒計時

回答

相關問題