changeColorsOnInterval-Simple.html

<!DOCTYPE html>
<html>
<head>
    <title>TMP</title>
</head>
<body>

    <script type="text/javascript">
        function changeBodyBG(color){
            document.body.style.backgroundColor = color;
        }

        function setNextColor(){
            console.log(i)
            changeBodyBG(colors[i]);

            // change index (you can do it with '%' as well)
            if(i < colors.length-1){
                i++
            }else{
                i = 0
            }
        }

        var colors = ["red", "green", "blue"];
        var i  = 0;

        var id = setInterval(setNextColor, 1000)

        // Task: call the clearInterval when a "Stop" button is clicked. Sure, you have to put that button and attach event to it
        // clearInterval(id)
    </script>
</body>
</html>