Как вызвать функцию JavaScript каждые 60 секунд? - PullRequest
Новая
       4

Как вызвать функцию JavaScript каждые 60 секунд?

1 голос
/ 13 июня 2010

Итак, я пытаюсь поработать над демоверсией Canvas и хочу, чтобы этот квадрат перемещался с одной стороны на другую, но я не могу понять, как вызывать JavaScript так, чтобы он повторялся каждые 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>

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

Ответы [ 2 ]

10 голосов
/ 13 июня 2010 
<!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>

1000 мс = 1 секунда, 60000 = 60 секунд.

1 голос
/ 13 июня 2010

Использование 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...