Question

我想使用java脚本实现计时器。我想减少间隔变化的计时器示例。假设我的计时器从500开始我希望减量计时器取决于诸如
的水平 1.第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（）函数，因此它的速度无法控制，因为我多次调用它。

Answer 1

几点：

您已经使用了所有全局变量，最好将它们保密，以便其他功能不会弄乱它们
按照惯例，以字母开头的函数名称是为构造函数保留的
分配给setTimeout的函数没有任何公共变量或函数来在运行时修改速度，因此您只能使用全局变量来控制速度。如果你不关心别人搞乱他们，那就没关系了，但最好还是让他们保密。
UpdateTimer的代码未包含在内
不是将字符串传递给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>

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

Answer 2

希望，这可能有所帮助：

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

Answer 3

Check this demo on 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();
}

希望这就是你要找的东西。

计时器使用JavaScript

3 个答案: