Question

以下是我的一些课程作业的代码（我承认）。正如您在评论中看到的那样，我已经使用按钮完成了'setinterval'。但我想要的是'setInterval'能够自动运行。我的意思是我不希望用户必须单击按钮。有没有办法做到这一点，如果是这样，你能指出我正确的方向。

<!DOCTYPE html>
<html>
<head>
    <title>Task 3 Manual traffic lights</title>
</head>
<body>
    <h1>JavaScript Task 3</h1>

    <p >This is my Traffic Light script</p>

    <img id="change-light" src="red_traffic_light.png" width="150"    height="300" align=middle>
    <!-- <button onclick="setInterval(changelights, 1000)" >Start the timer</button> -->
    <script>
        var list = ["red_traffic_light.png", "red-amber-traffic-light.png","green_traffic_light.png", "amber-traffic-light.png"
                   ];

        var index = 0

        function changelights() {
            index = index + 1

            if (index == list.length) index = 0;
            var image = document.getElementById('change-light');
            image.src=list[index];
        }

        </script>
    </body>
</html>

Answer 1

只需将setInterval(changelights, 1000)放入脚本代码中即可。

当浏览器运行该行代码时。它将启动计时器。

<script>
    setInterval(changelights, 1000);
</script>

Answer 2

文档准备就绪后调用它：

使用jQuery：

$( document ).ready(function() {
    setInterval(changelights, 1000);
});

纯javascript：

(function() {
   setInterval(changelights, 1000);
})();

如何在没有用户输入的情况下自动运行setInterval

2 个答案: