Question

我想每分钟更换一张图片。当计算机的时钟从8:50移动到8:51然后再到8:52一直回到8:49我希望我的图片从0001.jpg更改为0002.jpg到0003.jpg一直到1440。 JPG。

由于我将使用计算机的时钟，我有兴趣使用JavaScript。我也刚刚开始，所以完整的代码（这将是非常棒！）可能不是我需要的。相反，我正在寻找一个开始的地方，也许是一个方向。您知道的任何在线资源也会有所帮助

Answer 1

计算下一分钟开始的秒数，然后使用setTimeout开始旋转图片。每隔60000毫秒使用setInterval。

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


setTimeout(function(){

    console.log('start');

    setInterval(function(){

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

    }, 1000 * 60);

}, seconds * 1000);

您可以详细了解这两个函数here

Answer 2

您需要了解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，这将有助于避免会导致头痛的愚蠢语法错误。我建议阅读Douglas Crockford的书 JavaSript：The Good Parts 和Stoyan Stefanov的面向对象的JavaScript ，它们都是学习JavaScript的优秀书籍。

Answer 3

将下面的代码放在页面的BODY中：

<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 4

如果你想这样做与电脑时钟挂钩。使用setInterval延迟小于一秒（<1000），并使用Date()检查实际时间。这样您就可以根据时钟进行更改。

使用计算机的时钟每分钟更改一次图像以计时更改

4 个答案: