0

我创建了一个从 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 = ???;  
}

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

我希望你能指引我正确的方向。

4

6 回答 6

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

小提琴

或者没有 jQuery：

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

    el.innerHTML = (n>=24?0:n+1);
},300);
于 2013-10-01T19:45:07.043 回答
1

尝试这个

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

function TimeNumber() {
    iState++;

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

}

演示

于 2013-10-01T19:45:12.663 回答
1 
function TimeNumber()
{
  if (iState == 24){
     iState = 0;
  }
  iState++;
  document.getElementById("time").innerHTML = iState.toString();  
}
于 2013-10-01T19:45:27.587 回答
1

试一试：

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

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

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

jsfiddle

于 2013-10-01T19:46:06.833 回答
0

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

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

function TimeNumber() {
    document.getElementById("time").innerHTML = iState;
    iState = (iState % 24) + 1;
}
于 2013-10-01T20:05:34.513 回答
0

另一种选择

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 中查找它。

innerHTML更新表（IE 和 konquerer）时也不起作用，此解决方案将。（您尚未指定您的元素是什么，但我猜它不是您最初使用的表格innerHTML）

任何不存储setIntervalid 的答案都不能稍后在您的脚本中使用clearInterval.

于 2013-10-01T20:04:22.663 回答