小白学编程(js):通过按钮变换背景颜色

news2025/11/5 23:15:02

《JavaScript从入门到精通》【例9.1】
代码演示：

<body>
    <form class="form1" action="" name="form1" method="psot">
        <p>
            <input type="button" name="Submit" value="变换背景" onclick="turnColors()">
        </p>
        <p>用按钮随意变换背景颜色</p>
    </form>
    <script>
        var arrayColor = new Array('olive','teal','red','blue','maroon','navy','lime','green');
        var n = 0;
        function turnColors(){
            if(n == (arrayColor.length - 1)){
                n = 0;
            }else{
                n++;
                document.bgColor = arrayColor[n];
            }
        }
    </script>
</body>

思路总结：这一小节主要讲的是鼠标点击事件，也就是说当鼠标箭头悬停在该元素上从按下鼠标到抬起鼠标的整个过程，你希望当前元素在哪些方面做哪些改变。在这个例题中，希望通过鼠标单击按钮，改变背景颜色，也可以说改变document的bgColor的属性值。

JS逻辑：
第一步：创建变量arrayColor ，容纳颜色数组。
第二步：创建变量n，做计数器使用。
第三步：编写方法turnColors。
1.判断计数器的值是否等于颜色数组的最后一个颜色的下标。等于，设置为第一个颜色的下标。不等于，计数器继续自动加1，同时赋值给bgColor属性。

效果演示：
初始状态：
在这里插入图片描述

点击按钮后：
在这里插入图片描述

以上代码源于本书，下面是我修改js后的代码：

 var arrayColor = new Array('olive','teal','red','blue','maroon','navy','lime','green');
        var n = 0;
        function turnColors(){
            n = n <= (arrayColor.length - 1) ?  ++n : 0;
            document.bgColor = arrayColor[n];
        }