Блог

У меня проблема. Я хочу создать счетчик, который считает от 1 до 9 и повторяется. Время между подсчетами должно быть переменным (от 1 до 10 секунд в одной и той же серии). Иногда он должен добавлять 1, иногда 2 (поэтому иногда пропускайте одно число).

Возможно ли это с помощью javascript?

Заранее благодарю вас.

Это код, который у меня есть, но он только подсчитывает, иногда не пропускает число, а время подсчета фиксировано на уровне 500 мс.

   <div id="value">1</div>
  <script>
function animateValue(id){
    var obj = document.getElementById(id);
    var current = obj.innerHTML;
    setInterval(function(){
    obj.innerHTML = current  ;
    },500);
}
animateValue('value');
</script>
   </html>````

  

Во-первых, JSFiddle:http://jsfiddle.net/5k0xsrj6/embedded/result /

JSFiddle с увеличенным, стилизованным текстом:https://jsfiddle.net/9f4vgLbx/embedded/result

Редактировать: Я вижу, вы не знакомы с JavaScript. Я также включил JavaScript, отличный от ES6.

Самая большая проблема, с которой вы столкнетесь в своем коде, — это использование setInterval , поскольку вам нужен переменный таймер.

Вместо setInterval рассмотрим функцию, которая вызывает саму себя и устанавливает таймер. Как только setTimeout будет вызван, он снова вызовет функцию, чтобы установить другой тайм-аут, эффективно создавая интервал.

Скрипт, отличный от ES6:

 var el = document.body;
var max_count = 9;
var current_count = 1;

// Function which sets our timer
function timer(delay) {
    // Set a timeout with our passed `delay` arg
    setTimeout(function () {
        // Adds either 1 or 2 based on the return value of getIteration
        current_count  = getIteration();

        // As we have a max, reset to 1 if we're over
        if (current_count > max_count) {
            current_count = 1;
        }

        // Update innerHTML
        writer();

        // Call next iteration
        loop();

    }, delay);
}

// Writes our innerHTML
function writer() {
    el.innerHTML = current_count;
}

// Returns 1000 through 10000
function getDelay() {
    return Math.ceil(Math.random() * 10) * 1000;
}

// Returns either 1 or 2
function getIteration() {
    return Math.ceil(Math.random() * 2);
}

// Our main function to loop
function loop() {
    // getDelay will return a value between 1000 - 10000
    timer(getDelay());
}

// Sets Initial Value
writer();

// Main
loop();
  

Оригинал:

Вот пример кода на JSFiddle. Я включил комментарии, чтобы, надеюсь, объяснить логику.

 {
    const el = document.body;
    const max_count = 9;
    let current_count = 1;

    // Function which sets our timer
    const timer = delay => {
        setTimeout(() => {
            current_count  = getIteration();

            if (current_count > max_count) {
                current_count = 1;
            }

            // Update innerHTML
            writer();

            // Call next iteration
            main();

        }, delay);
    }

    // Writes our innerHTML
    const writer = (str, log) => {
        if (log) {
            console.log(str);
        } else {
            el.innerHTML = `Current count: ${current_count}`;
        }
    }

    // Returns 1000 through 10000
    const getDelay = () => {
        return Math.ceil(Math.random() * 10) * 1000;
    }

    // Returns either 1 or 2
    const getIteration = () => {
        return Math.ceil(Math.random() * 2);
    }

    // Our main function to loop
    const main = () => {
        const delay = getDelay();

        writer(`Next delay is ${delay}ms`, true);

        timer(delay);
    }

    // Set Initial Value
    writer();

    // Main
    main();
}
  

Надеюсь, это поможет! Если у вас есть какие-либо вопросы, не стесняйтесь задавать!