Меняйте изображение каждую минуту, используя часы компьютера, чтобы синхронизировать изменения

Question

Я хочу менять изображение каждую минуту. Когда часы компьютера перемещаются с 8:50 до 8:51, затем до 8:52 и обратно до 8:49, я хочу, чтобы мое изображение изменилось с 0001.jpg до 0002.jpg до 0003.jpg вплоть до 1440. JPG. ​​

Поскольку я собираюсь использовать часы компьютера, я заинтересован в использовании JavaScript. Я также только начинаю, так что полный код (что было бы здорово!), Вероятно, не то, что мне нужно. Вместо этого я ищу место для начала и, возможно, направление для движения. Любые ресурсы онлайн, о которых вы знаете, также будут полезны

Answer 1

подсчитайте, сколько секунд до начала следующей минуты, затем, используя setTimeout, начните вращать изображения.Используйте setInterval для этого каждые 60000 миллисекунд.

var seconds = 60 - new Date().getSeconds();


setTimeout(function(){

    console.log('start');

    setInterval(function(){

        console.log ('iterate over pictures here');

    }, 1000 * 60);

}, seconds * 1000);

Подробнее об обеих функциях можно прочитать здесь

Answer 2

Поместите приведенный ниже код в ТЕЛО страницы:

<img />
<script>
    var start = new Date().getTime(),
        i = 0,
        //get the node of the image to change
        img = document.getElementsByTagName('IMG')[0]; 

    setInterval(function(){
        //what time is now
        var now = new Date().getTime();
        if(now - start > 60000){
            //initialize the counter
            start = now;
            //overlay with 0's -> substr(-4)
            //rotate on 1440 with a modulo -> i++ % 1440
            img.src = ('000' + (i++ % 1440 + 1)).substr(-4)  + '.jpg';
        }
    }, 10000); //check every 10 sec
</script>

Если вы начинаете с Javascript, хорошим справочником будет MDC

Answer 3

Вы захотите изучить setInterval().

Код будет выглядеть примерно так:

var counter = 1,
lastUpdate = (new Date()).getTime(),
img = document.getElementById('image'); // Assuming your HTML has an img tag
                                        // with an id of "image"
// This function just pads your number with 0s
function pad(num) {
    var padding = '',
    i = 4 - num.toString().length;
    while (i > 0) {
        padding += '0';
        i -= 1;
    }
    return padding + num;
}    

// This function is what actually does the updating
function update() {
    var now = (new Date()).getTime();
    if (lastUpdate + 1000 <= now) {
        lastUpdate = now;
    img.src = pad(counter) + '.jpg'; // change the image
    counter += 1; // increment the counter

    if (counter > 1440) { // reset to 1 if we get to our last image
        counter = 1;
    }
    }
}

// Run update every 10th of a second
setInterval(update, 100);

На сайте Центра разработчиков Mozilla естьмножество замечательных ссылок JavaScript и DOM .Я также предложил бы научиться использовать JSLint , это очень поможет избежать глупых синтаксических ошибок, которые вызовут головные боли.Я бы посоветовал прочесть книгу Дугласа Крокфорда JavaSript: The Good Parts и Стоян Стефанова Объектно-ориентированный JavaScript . Они обе являются отличными книгами для изучения JavaScript.

Answer 4

Если вы хотите сделать это привязанным к часам компьютера.Используйте setInterval с задержкой менее секунды (<1000) и проверьте фактическое время с помощью <code>Date().Таким образом, вы можете вносить изменения в соответствии с часами.