Question

我想通过javascript制作一个计时器。我做了一个文本框，用户将给出值假设5，我想生成一个javascript计数器，它将根据用户输入计数，它将按秒计数。假设用户将在5秒完成后给出5，然后会产生一个警报，表示倒计时已停止。我想要这样......我该如何做到？请给出一些建议。

提前致谢

Answer 1

此代码将使您的计时器。如果在用户填写秒数时触发，Yous应该放置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 2

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 3

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 4

您可以这样做：

<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/。

Answer 5

尝试使用setTimeout（）函数。在某些事件上触发javascript函数 - 例如，该文本框的onBlur或点击某个按钮。

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>

如何使用javascript设置计时器

5 个答案: