如何每 60 秒调用一次 JavaScript 函数？

发布于 2024-09-05 07:19:56 字数 1145 浏览 2 评论 0原文

所以我正在尝试制作 Canvas 演示，我希望这个方块从一侧移动到另一侧，但我不知道如何以每 60 秒重复一次的方式调用 JavaScript。

这是我到目前为止得到的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />

        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>

        <script type="text/javascript">

        var x = 50;
        var y = 250;

        function update(){
            draw();
            x = x + 5;
        }

        function draw(){
          var canvas = document.getElementById('screen1');
          if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgb(236,138,68)';
            ctx.fillRect(x,y,24,24); 
            }
        }
        </script>

    </head>

    <body onLoad="setTimeout(update(), 0);">
        <canvas id="screen1" width="500" height="500"></canvas>
    </body>
</html>

原文

So I'm trying to work on a Canvas demo, and I want this square to move from one side to the other, but I can't figure out how to call JavaScript in a way that repeats every 60 seconds.

Here's what I got so far:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />

        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>

        <script type="text/javascript">

        var x = 50;
        var y = 250;

        function update(){
            draw();
            x = x + 5;
        }

        function draw(){
          var canvas = document.getElementById('screen1');
          if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgb(236,138,68)';
            ctx.fillRect(x,y,24,24); 
            }
        }
        </script>

    </head>

    <body onLoad="setTimeout(update(), 0);">
        <canvas id="screen1" width="500" height="500"></canvas>
    </body>
</html>

分享到QQ

分享到微博

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

发布评论

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

束缚ｍ 2024-09-12 07:19:56

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />

        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>


    </head>

    <body>
        <canvas id="screen1" width="500" height="500"></canvas> 
        <script type="text/javascript">

        var x = 50;
        var y = 250;

        function update(){
            draw();
            x = x + 5;
        }

        function draw(){
          var canvas = document.getElementById('screen1');
          if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgb(236,138,68)';
            ctx.fillRect(x,y,24,24); 
            }
        }
            update();
            setInterval ( update, 60000 );
        </script>
    </body>
</html>

1000ms = 1 秒，60000 = 60 秒。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />

        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>


    </head>

    <body>
        <canvas id="screen1" width="500" height="500"></canvas> 
        <script type="text/javascript">

        var x = 50;
        var y = 250;

        function update(){
            draw();
            x = x + 5;
        }

        function draw(){
          var canvas = document.getElementById('screen1');
          if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgb(236,138,68)';
            ctx.fillRect(x,y,24,24); 
            }
        }
            update();
            setInterval ( update, 60000 );
        </script>
    </body>
</html>

1000ms = 1 second, 60000 = 60 seconds.

回复收藏 0 原文

归途 2024-09-12 07:19:56

使用 setTimeout（而不是 setInterval）允许您通过clearTimeout 和变量的使用来停止动画。

（编辑：这整件事在 IE 中不起作用，但是 setTimeout -clearTimeout 组合本身应该......还更改了 onload 和 onclick 事件）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />
        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>
        <script type="text/javascript">             
            var x = 50;
            var y = 250;
            function update()
            {
                draw();
                x = x + 5;
                // For one minute, you would use 60000 instead of 100.
                // 100 is so you can actually see it move.
                myToggle = setTimeout(update, 100);
            };
            function draw()
            {
                var canvas = document.getElementById('screen1');
                if (canvas.getContext)
                {
                    var ctx = canvas.getContext('2d');
                    ctx.fillStyle = 'rgb(236,138,68)';
                    ctx.fillRect(x,y,24,24); 
                }
            };
            function stop()
            {
                clearTimeout(myToggle);
            };
            window.onload = function() 
            {                    
                document.getElementById("stop").onclick = function() { stop(); };
                document.getElementById("start").onclick = function() { update(); };
                update();
            };
        </script>
    </head>
    <body>
        <canvas id="screen1" width="500" height="500"></canvas><br/>           
        <input id="stop" type="button" value="Stop" /><br/>
        <input id="start" type="button" value="Start" /> 
    </body>
</html>

Using setTimeout, instead of setInterval, allows you to stop the animation with clearTimeout and the use of a variable.

(edit: this whole thing doesn't work in IE, but the setTimeout - clearTimeout combo itself should... also changed the onload and onclick events)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />
        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>
        <script type="text/javascript">             
            var x = 50;
            var y = 250;
            function update()
            {
                draw();
                x = x + 5;
                // For one minute, you would use 60000 instead of 100.
                // 100 is so you can actually see it move.
                myToggle = setTimeout(update, 100);
            };
            function draw()
            {
                var canvas = document.getElementById('screen1');
                if (canvas.getContext)
                {
                    var ctx = canvas.getContext('2d');
                    ctx.fillStyle = 'rgb(236,138,68)';
                    ctx.fillRect(x,y,24,24); 
                }
            };
            function stop()
            {
                clearTimeout(myToggle);
            };
            window.onload = function() 
            {                    
                document.getElementById("stop").onclick = function() { stop(); };
                document.getElementById("start").onclick = function() { update(); };
                update();
            };
        </script>
    </head>
    <body>
        <canvas id="screen1" width="500" height="500"></canvas><br/>           
        <input id="stop" type="button" value="Stop" /><br/>
        <input id="start" type="button" value="Start" /> 
    </body>
</html>

回复收藏 0 原文

~没有更多了~