如何使用javascript設置計時器

Question

我想通過javascript.I製作一個計時器，用戶將給出的值設置爲5的文本框，我想生成一個javascript計數器，它將根據用戶輸入計數，它會以秒爲單位計算。假設用戶給5，然後在5秒完成後會產生一個警告，表明倒計數已經停止。我想這樣。我該怎麼做？請給出一些建議。

在此先感謝

Answer 1

嘗試setTimeout（）函數。 在某些事件上觸發JavaScript函數 - 例如，該文本框的onBlur或某個按鈕的onClick。

function waitAndAlert(){ 

var timeToWait = document.getElementById(the_textbox_id).value; 
setTimeout(function(){alert("Thanks for waiting")},timeToWait*1000); 

} 

setTimeout比setInterval更相關的，因爲第一種方法只是等待一個延遲，並執行邏輯，而第二功能是指用於在週期性的間隔重複的邏輯。

更新： 要更新用戶的進度，可以使用@Prateek或@Kristof Feys建議的方法。但是，下面的示例使用setTimeout和setInterval的組合。

<script> 
var count; 
var countDown; 
var intervalHandl; 
function startcounting(){ 
    count = document.getElementById('countlimit').value; 
    countDown = parseInt(count); 
    var timer = count*1000; 
    intervalHandl = setInterval(function(){setCountdown()},1000); //trigger the periodic update 
    setTimeout(function(){showMsg()},timer); 

} 

function setCountdown(){ 
    var note = document.getElementById('note'); 
    note.innerHTML="Countdown: "+countDown; 
    countDown--; 
} 

function showMsg(){ 
    var note = document.getElementById('note'); 
    clearInterval(intervalHandl); //stops the periodic update before... 
    note.innerHTML="Countdown Over!! "; //...informing the user that the countdown is over 
} 
</script> 

Answer 2

此代碼將使您的計時器。你要跟應該把2條線，當秒鐘由您希望秒出現在用戶

//THESE 2 LINES ARE FOR IN THE EVENT 
var count=document.getElementById('SecondsInput').value; 
var counter=setInterval(timer, 1000); //run it every 1 second 



function timer() 
{ 
    count-=1; 
    if (count <= 0) 
    { 
    clearInterval(counter); 
    window.alert("done!"); 
    } 

    //Do code for showing the number of seconds here 
} 

Answer 3

var count=30; 

var counter=setInterval(timer, 1000); //1000 will run it every 1 second 

function timer() 
{ 
count=count-1; 
    if (count <= 0) 
    { 
    //counter ended, do something here 
    return; 
    } 
} 

填入被觸發事件。然後插入以下行到您的timer（）函數中，所以它看起來像這樣：

function timer() 
{ 
count=count-1; 
if (count <= 0) 
{ 
    return; 
} 

document.getElementById("timer").innerHTML=count + " secs"; 
} 

計時器出現在段落中。

<span id="timer"></span> 

Answer 4

window.setInterval(function(){ 
    /// call your function here for every second 

var rem=document.getElementById("id").value; 
if (rem==0) 
alert("timeup"); 
rem=rem-1000; 
document.getElementById("hidden_id").value=rem;//create a hidden field of time counter 
}, 1000); 

<input id="id" type="text" value="">counter_in_millis</input> 
<input id="hidden_id" type="hidden" value=""></input> 

Answer 5

你可以做到這一點，像這樣：

<input></input><button>start</button> 

的Javascript：

onload = function() { 
    var input = document.getElementsByTagName('input')[0], 
     button = document.getElementsByTagName('button')[0]; 
    button.onclick = function() { 
     setTimeout(function() { 
      alert('too late...'); 
     }, input.value * 1000); 
    } 
}; 

這裏是一個演示：http://jsfiddle.net/wared/KgBF5/。