如何使用 switch 和 case 生成图片？答案

【问题标题】：How can I generate a picture using switch and cases?如何使用 switch 和 case 生成图片？
【发布时间】：2018-04-01 04:20:30
【问题描述】：

这是我目前所拥有的。 newNumber 是我做的一个函数，只是为了做最小值和最大值。我真的遇到了麻烦。

function onclick() {
        var num = parseFloat(document.getElementById("do").value);
        if (num <= 0) {
            alert("Please enter a bet amount between 1 and 100");
        }
        else if (num > 100) {
            alert("Please enter a bet amount between 1 and 100");
        }

        var stake = document.getElementById("txtStake").value;
        if (stake < num) {
            alert("Wrong number Can't Be Higher Than Stake Number")
        }

        var random = newNumber(1, 7);

        if (random == 1) {
            document.getElementById("toChangeColor").style.backgroundColor = "red";                
        }
        else if (random == 2) {
            document.getElementById("toChangeColor").style.backgroundColor = "green";
        }
        else if (random == 3) {
            document.getElementById("toChangeColor").style.backgroundColor = "gray";
        }
        else if (random == 4) {
            document.getElementById("toChangeColor").style.backgroundColor = "yellow";
        }
        else if (random == 5) {
            document.getElementById("toChangeColor").style.backgroundColor = "brown";
        }
        else if (random == 6) {
            document.getElementById("toChangeColor").style.backgroundColor = "blue";
        }
        else if (random == 7) {
            document.getElementById("toChangeColor").style.backgroundColor = "black";
        }

        switch (random) {
            case 1:
                document.getElementById("picture").src = "time.jpg";
                break;
            case 2:
                document.getElementById("picture").src = "pic2.jpg";
                break;
            case 3:
                document.getElementById("picture").src = "pic3.jpg";
                break;
            case 4:
                document.getElementById("picture").src = "pic4.jpg";
                break;
            case 5:
                document.getElementById("picture").src = "pic5.jpg";
                break;
            case 6:
                document.getElementById("picture").src = "pic6.jpg";
                break;
            case 7:
                document.getElementById("picture").src = "pic7.jpg";
                break;
        }
    }

当我单击一个按钮时，我需要从 5 个选项中随机选择一张图片来显示在某个区域。如何使用开关或循环来做到这一点？

【问题讨论】：

您尝试过什么 - 向我们展示您尝试过的一些代码。
欢迎来到 StackOverflow！为了让我们更好地帮助您，您能否更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。如果您可以让我们知道您有什么tried so far 来解决您的问题，这也会很有帮助。如需更多信息，请参阅有关how to ask good questions 的帮助文章，并采取tour of the site :)
我所做的只是做出 switch 语句：
好的。好吧，当然可以使用开关来做到这一点，但这不是我会选择的。如果您已经尝试过的方法不起作用，请edit 您的问题以展示您的尝试，我们可以帮助解释如何解决它。从您的 cmets 看来，您至少已经完成了一半。
请做简单的研究：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript jquery html loops switch-statement

【解决方案1】：

你的情况写switch或者case会多余的话，直接make成数组或者二维数组就好了。

var bgColors = ['red', 'green', 'yelow'];
var pics = ['time.jpg', 'pic2.jpg', 'pic3.jpg'];

var randomIndex = newNumber(0, 2);

document.getElementById("toChangeColor").style.backgroundColor = bgColors[randomIndex];
document.getElementById("picture").src = pics[randomIndex];

【讨论】：