我有一个问题，我一直试图解决，但我似乎无法在网上找到它。我是 Javascript 新手，我真的很想掌握它。这是我的问题。
我希望能够在屏幕上显示图像。当程序启动时，会从一组图像中选择一个随机图像。例如。假设我有一个绿色按钮、一个蓝色按钮和一个红色按钮。当浏览器加载时，我希望按钮从该组图像中随机显示。这是我到目前为止所掌握的，请耐心等待，我仍在学习。现在据我了解，我已经有了图像。我正在使用 document.getElementById 来获取标签的元素，对吗？我还有随机方法来选择 1 到 3 之间的数字。现在我只需要弄清楚如何让它在其他 2 个图像(蓝色按钮和绿色按钮)之间进行选择
感谢您的宝贵时间。
编辑:我希望能够在不使用数组或对象的情况下完成此操作。
<body>
<img src="red.jpg" id="numberOne">
</body>
<script>
var randomNumberOne = Math.ceil(Math.random() * 3);
var numberOne = document.getElementById("numberOne");
</script >最佳答案
没有数组(并且不会通过使用更方便的文件名来“作弊”):
function rand_button(){
switch(Math.random()*3|0){
case 0:
return 'red.jpg';
case 1:
return 'blue.jpg';
case 2:
return 'green.jpg';
}
}
document.getElementById('numberOne').src=rand_button();
注意:Math.random() 返回 0(含)和 1(不含)之间的数字。
例如，Math.random()*5 将永远返回 5。
还要记住，您需要对数字进行四舍五入(您确实这样做了)。 javasript 中的一个简单技巧是使用按位 OR 又名 |。这会将数字(到 (2pow31)-1===2147483647 又名 31 位)向下舍入到最接近的整数。
因此 Math.random()*3|0 可以给出 0、1 和 2 (您指定了 3 个图像)。
接下来我使用了一个包含 switch 语句的函数。我们将随机整数提供给语句并比较每种情况。因此，如果 case(随机数)为 0，我们将返回字符串“red.jpg”(等等)。我们使用(早期)返回，因为否则我们需要break语句(因为 switch 语句“失败”，这意味着它们是一种“转到并从那里继续”，并且它节省了我们来自额外的变量和一些无用的字符)。
现在我们只需执行 () 这个名为 rand_button 的函数来获取我们的随机字符串(在本例中是图像中的文件名)并将其设置为图像来源numberOne。
编辑:
现在，让我们与 if 进行比较:
function rand_button(){
var rnd=Math.random()*3|0;
if(rnd===0) return 'red.jpg';
if(rnd===1) return 'blue.jpg';
if(rnd===2) return 'green.jpg';
}
我们再次使用“早期”返回(返回随机字符串，也称为文件名)。
在 javascript 中，我们使用严格相等(我们将其写为===)来比较此类情况。
因此，如果生成的随机数(通过标识符 rnd 引用)等于给定数字，我们将返回相应的字符串。
让我们疯狂地使用“短路”:
var rnd=Math.random()*3|0;
var elm=document.getElementById('numberOne');
elm.src= (rnd===0 && 'red.jpg') || (rnd===1 && 'blue.jpg') || (rnd===2 && 'green.jpg');
在 JavaScript 中，“短路”依赖于返回值的语句。我们将其与 javascript 的真/假和逻辑运算符的思想结合起来。
&& 表示“AND”，|| 表示“OR”。
现在考虑这个例子:2===3 && 2===2
javascript 永远不会测试 2===2 因为 2===3 已经 失败了，而我们希望两者都失败说实话..
另一方面，如果我们使用: 2===3 || 2===2，然后 javascript 将测试 2===2，因为第一个测试 2===3 失败。
现在的技巧是.. javascript 将非空字符串视为 bool 值“true”..
SO:如果我们的 rnd 数字是 1，那么这是 javascript“思考”/所做的事情的简化解释:
rnd===0 // nope, so skip 'red.jpg' (that makes the contents between first `()` false)
rnd===1 // yes
'blue' // that is a string (that makes the contents between second `()` true)
//hey we found a true, so we don't care about the final OR (`|| (rnd===2 && 'green.jpg')`)
//so let's return true value: 'blue.jpg'
(我不会在这里讨论三元，因为这样我们也会遇到如何处理最后一个“else”情况的问题。如果我们需要一个 default 在我们的switch 或 else 语句，则三元组将与)相关。
这就是数组解决方案的原因:
document.getElementById('numberOne').src= ['red.jpg','blue.jpg','green.jpg'][Math.random()*3|0];
是最简单/最短的解决方案(因为您不重复使用它:您只在页面加载时使用它一次)。
奖金:
您可以使用函数从数组中获取随机字符串(作为参数传递)。
function get_rnd_str(arr){
return arr[Math.random()*arr.length|0];
}
var elm=document.getElementById('numberOne');
elm.src=get_rnd_str(['red.jpg','blue.jpg','green.jpg']);
再次使用上面解释的内容:我们让 javascript 告诉我们数组的长度，并使用该数字作为乘数来计算随机数。
明显的优点是我们不再需要对乘法器进行硬编码:它总是会给出一个有效的数字(就像我们的数组的索引实际上(应该)保存一个值)。
现在我们只需向函数传递一个连续字符串数组，函数就会返回一个随机结果。
关于javascript - Javascript 中的随机图像生成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26900504/