定时器使用javascript

timer using javascript

本文关键字：javascript 定时器      更新时间：2023-09-26

我想用java脚本实现定时器。我想随着时间间隔的变化使计时器递减
示例。假设我的计时器从500开始
我需要根据级别递减计时器，例如
1.一级计时器应递减1，递减速度也应较慢
2.2第二级计时器应递减2，递减速度应为中等
3.3级计时器应递减3，递减速度应快

我可以使用以下代码创建计时器：

<script type="text/javascript">
var Timer;
var TotalSeconds;
function CreateTimer(TimerID, Time) 
{
    TotalSeconds=Time;
    Timer = document.getElementById(TimerID);
    TotalSeconds = Time;
    UpdateTimer();
    setTimeout("Tick()", 1000);
}
function Tick() {
    TotalSeconds -= 10;
    if (TotalSeconds>=1)
    {
        UpdateTimer();
        setTimeout("Tick()", 1000);
    }
    else
    {   
        alert(" Time out ");
        TotalSeconds=1;
        Timer.innerHTML = 1;
    }
}

但是我多次调用这个CreateTimer（）函数，所以它的速度无法控制，因为我多次调用它。

两点：

  1. 您已经使用了所有全局变量，最好将它们保密，这样其他函数就不会干扰它们
  2. 按照惯例，以大写字母开头的函数名是为构造函数保留的
  3. 分配给setTimeout的函数在运行时没有任何公共变量或函数来修改速度，因此只能使用全局变量来控制速度。如果你不在乎别人打扰他们，那没关系，但最好把他们保密
  4. UpdateTimer的代码尚未包含
  5. 不向setTimeout传递字符串，而是传递函数引用：setTimeout(Tick, 1000);

无论如何，如果你想要一个简单的定时器，你可以改变速度：

<script>
var timer = (function() {
    var basePeriod = 1000;
    var currentSpeed = 1;
    var timerElement;
    var timeoutRef;
    var count = 0;
    return {
      start : function(speed, id) {
        if (speed >= 0) {
          currentSpeed = speed;
        }
        if (id) {
          timerElement = document.getElementById(id);
        }
        timer.run();
      },
      run: function() {
        if (timeoutRef) clearInterval(timeoutRef);
        if (timerElement) {
          timerElement.innerHTML = count;
        }
        if (currentSpeed) {
          timeoutRef = setTimeout(timer.run, basePeriod/currentSpeed);
        }
        ++count;
      },
      setSpeed: function(speed) {
        currentSpeed = +speed;
        timer.run();
      }
    }
}());
window.onload = function(){timer.start(10, 'timer');};
</script>
<div id="timer"></div>
<input id="i0">
<button onclick="
  timer.setSpeed(document.getElementById('i0').value);
">Set new speed</button>

它将所有变量都保存在闭包中，因此只有函数才能修改它们。您可以通过将速度设置为零来暂停它。

希望，这可能会有所帮助：

<html>
<head>
<script type="text/javascript">
function showAlert()
{
var t=setTimeout("alertMsg()",5000);
}
function alertMsg()
{
alert("Time up!!!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Start" onClick="timeMsg()" />
</form>
</body>
</html>

在jsFiddle.net上查看此演示。

HTML

<div id="divTimer">100</div>
<div id="divDec">1</div>
<div id="divSpeed">100</div>
<input id="start" value=" Start " onclick="javaScript:start();" type="button" />
<input id="stop" value=" Stop " onclick="javaScript:stop();" type="button" /><br/>
<input id="inc" value=" Increase " onclick="javaScript:increase();" type="button" />
<input id="dec" value=" Decrease " type="button" onclick="javaScript:decrease();"/>​

JavaScript

 var handler;
function start() {
    handler = setInterval("decrementValue()", parseInt(document.getElementById('divSpeed').innerHTML, 10));
}
function stop() {
    clearInterval(handler);
}
function decrementValue() {
    document.getElementById('divTimer').innerHTML = parseInt(document.getElementById('divTimer').innerHTML, 10) - parseInt(document.getElementById('divDec').innerHTML, 10);
}
function increase() {
    document.getElementById('divDec').innerHTML = parseInt(document.getElementById('divDec').innerHTML, 10) + 1;
    document.getElementById('divSpeed').innerHTML = parseInt(document.getElementById('divSpeed').innerHTML, 10) + 200;
    stop();
    decrementValue();
    start();
}
function decrease() {
    document.getElementById('divDec').innerHTML = parseInt(document.getElementById('divDec').innerHTML, 10) - 1;
    document.getElementById('divSpeed').innerHTML = parseInt(document.getElementById('divSpeed').innerHTML, 10) - 200;
    stop();
    decrementValue();
    start();
}​

希望这就是你想要的。

相关文章：