基本的Javascript帮助*非常需要* [关闭]

Question

您好，我是编码新手，我需要一些有关我的 javascript 的帮助。这是我必须做的。 （我很想得到一个解释和答案，我真的在努力学习。） 这是我需要做的。

我需要显示一张带有它选择的随机汽车的图像。 （选项有 bmw、Saab 和 Maserati。如果你赢了 bmw，应该有 bmw 的照片）我不知道怎么做，我从来没有使用过数组。

非常感谢您的帮助！

    <script>

            var username = prompt("Hello, who are you?");
            var car = new Array("BMW", "Saab", "Maserati");
            console.log(car);

            if(username==="Chris") {
                document.write("<h1>Hello " + username + " you won a " + car[1] + "!</h1>");

            }else if(username === "Sasha") {
            document.write("<h1>Hello " + username + " you won a " + car[1] + "!</h1>");
            }

            else {
                document.write("<h1>Hello " + username + "!");
            }

        </script>

Answer 1

这应该可以让您开始获取随机汽车和要显示的图像。现在您为 Chris 和 Sasha 提供的信息似乎是正确的（只是没有图像），尝试调整它并继续您的答案。

// can define an array as new Array() or hard bracket syntax
var carImages = [
 // image for BMW
 'https://cdn.motor1.com/images/mgl/PR8w2/s1/bmw-serie-8-2019.jpg',
 // image for Saab
 'https://upload.wikimedia.org/wikipedia/commons/e/e5/Saab_900_GLE_%282%29_%28crop%29.jpg',
 // image for Maserati
 'https://cdn.motor1.com/images/mgl/A8Jkx/s1/maserati-granturismo-zeda.jpg',
];

// The Math.random() function returns a decimal number between 0 - 1 inclusive of 0, but not 1
// So this variable will create a number between 0 - 2. We need zero to two because the 
// zero index is the image for the BMW, 1 is for the Saab, and 2 is for the Maserati.
// Arrays start at 0 for the first element in JavaScript 
var randomIntegerBetweenZeroToTwo = Math.floor(Math.random() * 3);
// display the image on the screen. The src attribute takes the URL of the image and the
// alt attribute is for screen readers or if the image did not load.
document.write('<img src=' + carImages[randomIntegerBetweenZeroToTwo] + ' alt="car"/>');

Answer 2

也许删除 if-else 语句，因为这些语句不符合您的目的。他们根据用户输入的名称分配汽车，这不是您想要的。您希望您的程序为用户是谁从数组中随机选择一辆汽车。

因此，要实现这一点，请尝试使用 Math.random() 函数生成一个介于 0 到数组大小之间的随机数，并将该数字保存在变量中。使用该变量来访问您的数组。

Answer 3

其他人已经向您展示了如何从数组中选择随机值。这是一种很好的常见做法，但是当你大量使用随机性时，它就有点多了。 randojs.com 使随机的东西变得简单易读。使用randojs，你需要做的就是从数组中选择一个随机值，而不是myArray[Math.floor(Math.random() * myArray.length)]（它选择0到1之间的随机小数，将它乘以数组的长度，然后四舍五入结果向下生成一个从 0 到比数组长度小 1 的数字，因为 arrays are 0-indexed in JavaScript- 然后从该索引处的 myArray 中获取值）。为了避免这种通常伴随着 JavaScript 随机性的小复杂性，使用 randojs 所要做的就是在 HTML 文档的 head 标签中包含以下内容：

<script src="https://randojs.com/1.0.0.js"></script>

然后你可以在你的脚本中使用它，像这样：

var username = prompt("Hello, who are you?");

//carArrays is an array of arrays. each nested array holds a car name at index 0 and a car photo url at index 1
var carArrays = [
  ["BMW", "https://upload.wikimedia.org/wikipedia/commons/6/64/2017_BMW_340i_%28F30_LCI%29_Luxury_Line_sedan_%282018-07-30%29_01.jpg"], 
  ["Saab", "https://upload.wikimedia.org/wikipedia/commons/5/5d/Saab_9-3_Mk2_.jpg"],
  ["Maserati", "https://upload.wikimedia.org/wikipedia/commons/1/15/2018_Maserati_GranTurismo_Sport_Automatic_4.7_Front.jpg"]
];

//check usernames for Chris or Sasha, using .toLowerCase() so we can effectively ignore capitalization or the lack thereof
if(username.toLowerCase() === "chris" || username.toLowerCase() === "sasha"){
  //pick a random nested array from carArrays
  var randomCarArray = rando(carArrays).value;
	
  //and write to the page
  document.write("<h1>Hello " + username + " you won a " + randomCarArray[0] + "!</h1><img src='" + randomCarArray[1] + "'/>");
}
else{
  //just say hello
  document.write("<h1>Hello " + username + "!");
}

/*give the images a width so they're not huge*/
img{
  width:300px;
}

<script src="https://randojs.com/1.0.0.js"></script>