当前位置：文江博客话题详情

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

发布于 2024-11-14 11:46:04 字数 233 浏览 4 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

骷髅 2024-11-21 11:46:04

计算距离下一分钟开始还有多少秒，然后使用 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);

您可以在此处了解有关这两个函数的更多信息

compute how many seconds until the next minute starts, then using setTimeout begin rotating the pictures. Use setInterval to do so every 60000 milliseconds.

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


setTimeout(function(){

    console.log('start');

    setInterval(function(){

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

    }, 1000 * 60);

}, seconds * 1000);

You can read more about both functions here

回复收藏 0 原文

爱格式化 2024-11-21 11:46:04

您需要研究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 的优秀书籍。

You'll want to study up on setInterval().

The code would look something like this:

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

The Mozilla Developer Center site has lots of great JavaScript and DOM references. I would also suggest learning to use JSLint, it will help a lot in avoiding stupid syntax errors that will cause headaches. I would suggest reading Douglas Crockford's book JavaSript: The Good Parts and Stoyan Stefanov's Object-Oriented JavaScript they are both excellent books to learn JavaScript from.

回复收藏 0 原文

寂寞花火° 2024-11-21 11:46:04

将下面的代码放在页面的主体中：

<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

Place the code below in the BODY of a page:

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

If you start with Javascript a good reference is MDC

回复收藏 0 原文