Question

我创建了一个从0到24计数的计数器，当它到达24时：

setInterval(function(){DayAndNight()}, 1000);

    var iState = 12;

    function DayAndNight()
    {
        //console.log('test');
        switch(iState)
        {

            case 1:
            { 
                document.getElementById("time").innerHTML = "1";  
                iState++;
                break;  
            }

            case 2:
            {
                 document.getElementById("time").innerHTML = "2";   
                 iState++;
                 break;    
            }     

            case 3:
            {
                 document.getElementById("time").innerHTML = "3";
                iState++;
                break;
            }

依此类推，直到24点我返回iState1：

            case 24:
            {
                document.getElementById("time").innerHTML = "24";
                iState = 1;                                 
                break;                     
            }

这很好用，我可以将它设置为从iState 12开始，所以它不只是从0到24计数。

但是，我想知道是否有更简单的方法来完成这项任务？这是一个简单函数的很多代码。我正在尝试这样的事情：

var time = setInterval(function(){TimeNumber();},1000);

function TimeNumber()
{
  for (var i=0;i<23;i++)
  document.getElementById("time").innerHTML = ???;  
}

但我不知道下一步是什么。

我希望你能引导我朝着正确的方向前进。

Answer 1

试试这个

var time = setInterval(TimeNumber, 1000);
var iState = 1;

function TimeNumber() {
    iState++;

    document.getElementById("time").innerHTML = iState;
    if (iState == 24) iState = 0;

}

<强> Demo

Answer 2

function TimeNumber()
{
  if (iState == 24){
     iState = 0;
  }
  iState++;
  document.getElementById("time").innerHTML = iState.toString();  
}

Answer 3

试一试：

var time = setInterval(function(){TimeNumber();},1000);
var iState = 1;

function TimeNumber()
{
  document.getElementById("time").innerHTML = iState;
  iState++;

  if (iState === 25) {
    iState = 1;
  } 
}

jsfiddle

Answer 4

setInterval(function() {
    $('#time').text(function(_,txt) {
        var n = parseInt(txt,10);
        return n>=24?0:n+1;
    });
},1000);

FIDDLE

或没有jQuery：

setInterval(function() {
    var el = document.getElementById('time'),
        n  = parseInt(el.innerHTML,10);

    el.innerHTML = (n>=24?0:n+1);
},300);

Answer 5

另一种选择

HTML

<div id="time"></div>

的Javascript

var dayAndNight = (function () {
        var iState = 1,
            timeDiv = document.getElementById("time"),
            countNode;

        return function () {
            var textNode = document.createTextNode(iState);

            if (!countNode) {
                countNode = timeDiv.appendChild(textNode);
            } else {
                timeDiv.replaceChild(textNode, countNode);
                countNode = textNode;
            }

            iState += 1;
            if (iState > 24) {
                iState = 1;
            }
        };
    }()),
    intervalId = setInterval(dayAndNight, 1000);

jsFiddle

这个解决方案有一些优点，因为iState现在包含在一个闭包中，并且不会在以后的脚本中意外修改。（接受的答案使用本地全局，可以在以后更改，如果设置大于25，那么由于===检查，计数永远不会被重置）

此解决方案也不会破坏名为time的元素的内容（接受的答案使用innerHTML），并且只更新它自己的节点。因此，您可以愉快地添加或删除time元素中的内容。

此解决方案还会缓存id为time的元素，因此每次更新时都不会在DOM中查找它。

更新表（IE和konquerer）时，

innerHTML也不起作用，此解决方案将会。（你没有指明你的元素是什么，但我猜你不是最初使用innerHTML的表格。

任何未存储setInterval ID的答案都无法在以后的clearInterval脚本中停止。

Answer 6

所有这些答案，并没有模数除法。这是我的2美分。

var time = setInterval(TimeNumber, 1000);
var iState = 1;

function TimeNumber() {
    document.getElementById("time").innerHTML = iState;
    iState = (iState % 24) + 1;
}

从1到24计数，然后重新启动

6 个答案: