Question

尝试使用math.floor / math.random JS对象编写函数，该对象返回1到5之间的数字，并根据每次单击按钮时的数字更改颜色，如下所示：

每次单击该按钮时，该函数只返回函数中的最后一种颜色（darkslateblue），即使我将“i = 5”设置为“i = 10”（除非我将其设置为0）。这是因为我的getRndInteger函数，我的colorFunction还是我的？

Answer 1

这是完成的代码 - 我认为你想要实现的目标。如果我是从头开始做的，我会接近它，但这会让你接近并使逻辑工作。

最好复制/粘贴代码而不是屏幕截图。
您的随机通话需要在您的颜色功能中才能在按钮点击时调用。
6种可能的随机数（0-5）只有5种颜色可供选择。
在javascript中使用“==”或“===”进行等式检查，而不是“=”
在调用Math.random

无论如何，代码的粗略概念如下。

<div id="banner">Color Banner</div>
<button id="button" onclick="colorFunction()">Change Color</button>
<script>
    var x = document.getElementById("banner");
    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;  
    }
    function colorFunction() {   
    var i = getRndInteger(0, 6);
    if (i == 0) {
        x.style.backgroundColor = "teal";
        x.innerHTML = i;
    }
    if (i == 1) {
        x.style.backgroundColor = "goldenrod";
        x.innerHTML = i;
    }
    if (i == 2) {
        x.style.backgroundColor = "darkolivegreen";
        x.innerHTML = i;
    }
    if (i == 3) {
        x.style.backgroundColor = "darkslategrey";
        x.innerHTML = i;
    }
    if (i == 4) {
        x.style.backgroundColor = "darkslateblue";
        x.innerHTML = i;
    }
    if (i == 5) {
        x.style.backgroundColor = "maroon";
        x.innerHTML = i;
    }
   }
</script>

或者，而不是if-else语句，您可以使用开关：

<div id="banner">Color Banner</div>
<button id="button" onclick="colorFunction()">Change Color</button>

<script>
    var x = document.getElementById("banner");

    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

    function colorFunction() {

        var i = getRndInteger(0, 6);

        x.innerHTML = i;

        switch (i) {
            case 0:
                x.style.backgroundColor = "teal";
                break;
            case 1:
                x.style.backgroundColor = "goldenrod";
                break;
            case 2:
                x.style.backgroundColor = "darkolivegreen";
                break;
            case 3:
                x.style.backgroundColor = "darkgrey";
                break;
            case 4:
                x.style.backgroundColor = "darkslateblue";
                break;
            case 5:
                x.style.backgroundColor = "maroon";
                break;
        }
    }
</script>

Math.random / floor有一个功能和onclick？

1 个答案: