Считайте от 1 до 24, а затем перезапустите

Question

Считайте от 1 до 24, а затем перезапустите

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 = ???;  
}

Но я не знаю, что следующий шаг.

Надеюсь, вы можете вести меня в правильном направлении.

Adnaves 01 окт. 2013, в 22:10

Источник

0

var time = setInterval(TimeNumber, 1000); намного чище
Brad M 01 окт. 2013, в 19:41
2

Да, удалите оператор switch и используйте innerHTML = iState а не число, а затем используйте оператор if, чтобы сбросить его до 0, если он innerHTML = iState 24 вариантов переключения, которые делают то же самое, немного избыточно.
Kevin B 01 окт. 2013, в 19:41
1

Просто используйте оператор по модулю (%). Продолжайте увеличивать счетчик, но отображать (счетчик% 24).
Blazemonger 01 окт. 2013, в 19:43

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

6 ответов

2

попробуй это

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

function TimeNumber() {
    iState++;

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

}

демонстрация

Satpal 01 окт. 2013, в 18:19

2

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

Deblaton Jean-Philippe 01 окт. 2013, в 17:38

1

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

adeneo 01 окт. 2013, в 16:47

0

Все эти ответы и отсутствие модульного разделения. Вот мои 2 цента.

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

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

Ian McLaird 01 окт. 2013, в 18:58

0

ОП фактически изменил спецификацию с 1 на 24
Xotic750 01 окт. 2013, в 20:14

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.

Это решение также кэширует элемент с идентификатором time поэтому он не просматривается в DOM каждый раз, когда происходит обновление.

innerHTML также не будет работать при обновлении таблиц (IE и konquerer), это решение будет. (вы не указали, что такое ваш элемент, но я предполагаю, что это не таблица, поскольку вы изначально использовали innerHTML)

Любые ответы, которые не хранят идентификатор setInterval не могут быть остановлены позже в вашем скрипте с clearInterval.

Xotic750 01 окт. 2013, в 18:19

Ещё вопросы

var time = setInterval(TimeNumber, 1000); намного чище
Да, удалите оператор switch и используйте innerHTML = iState а не число, а затем используйте оператор if, чтобы сбросить его до 0, если он innerHTML = iState 24 вариантов переключения, которые делают то же самое, немного избыточно.
Просто используйте оператор по модулю (%). Продолжайте увеличивать счетчик, но отображать (счетчик% 24).
ОП фактически изменил спецификацию с 1 на 24

Brian Phillips · Accepted Answer · 2013-10-01T18-00-00.000Z

Сделайте снимок:

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

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

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

jsfiddle