随机数，随机颜色循环
[英]Random numbers, random colour loops
问题描述
我目前正在自学HTML / Javascript，有同事提出了一些挑战。
我正在尝试创建将在1至99之间显示3个随机数的循环。 每个显示随机的颜色。 已经进行了一些搜索，无法找到任何包含我循环这四个方面的内容。
以下是到目前为止我要去的地方。 任何想法如何将其转换为循环？
非常感谢克里斯
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Hello World!</h1>
<h2>10 Random Coloured Numbers</h2>
<p id="no1"></p>
<p id="no2"></p>
<p id="no3"></p>
<script>
document.getElementById("no1","no2","no3").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no1","no2","no3").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
</script>
2 个解决方案
解决方案1
0 2017-10-06 15:43:25
您要给document.getElementById三个参数，但只能有一个。 您希望它可以为您循环显示三个ID，但事实并非如此-您必须自己进行循环。
// fails because getElementById only takes one argument
document.getElementById("no1","no2","no3")
// works (gets one element)
document.getElementById("no1")
使用循环的第一步是知道传递变量而不是文字字符串也可以工作：
var firstId = "no1"
// works (gets one element)
document.getElementById(firstId)
您必须知道的另一件事是如何编写循环。 有写循环的几种方法在JavaScript中，包括while和for一般，和更先进的，但更短的方法，如.forEach和.reduce 。
在这种情况下，我建议您使用一个循环来计算从1到3的数字。（实际上，这不是最简单的方法，因为您要遍历三个字符串，例如"no1" ，但以后切换到该字符串更容易动态地向页面添加颜色，而无需事先手动编写三个p元素。）对于此数字循环，可以使用for循环：
for (var i = 1; i <= 3; i++) {
// this will be run three times, in which
// the variable i will be 1, 2, or 3
}
在编写数字for循环时，您必须决定的事情通常只是变量名i ，起始数字1和终止数字3以及何时在<=或<结束数字之前停止。 循环三遍的另一种常见方式是使用数字0到2，并且var i = 0; i < 3; i++ var i = 0; i < 3; i++ var i = 0; i < 3; i++ 。
对于示例代码，您具有ID的格式类似于“ no1”，并且您需要从变量i存储的数字1到达那里。 为此，您可以执行var id = "no" + i 。
现在，您有了以下循环：
for (var i = 1; i <= 3; i++) {
var id = "no" + i
// the variable id will be "no1", "no2", or "no3"
}
为了帮助您学习，我不会写出最终代码。 但是从这里开始，通过汇总我告诉您的内容应该很容易弄清楚该怎么做。
解决方案2
0 已采纳 2017-10-06 15:51:22
getElementById仅接受一个参数，因此即使您传递三个参数，它也只会关心第一个参数，因此您应将代码更改为：
document.getElementById("no1").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no1").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
document.getElementById("no2").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no2").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
document.getElementById("no3").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no3").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
document.getElementById("no1").innerHTML = Math.floor(Math.random() * 101) document.getElementById("no1").style.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16); document.getElementById("no2").innerHTML = Math.floor(Math.random() * 101) document.getElementById("no2").style.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16); document.getElementById("no3").innerHTML = Math.floor(Math.random() * 101) document.getElementById("no3").style.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
<h1>Hello World!</h1> <h2>10 Random Coloured Numbers</h2> <p id="no1"></p> <p id="no2"></p> <p id="no3"></p>
也可以在这里找到： https : //jsfiddle.net/9vg262w5/
当然，它将重复您的代码。 像这样写，很容易找出除id之外的所有其他内容，因此可以使用for并保存一些代码，如下所示：
for(var i=1; i<=3; i++){
document.getElementById("no"+i).innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no"+i).style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
}
for(var i=1; i<=3; i++){ document.getElementById("no"+i).innerHTML = Math.floor(Math.random() * 101) document.getElementById("no"+i).style.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16); }
<h1>Hello World!</h1> <h2>10 Random Coloured Numbers</h2> <p id="no1"></p> <p id="no2"></p> <p id="no3"></p>
也可以在这里找到： https : //jsfiddle.net/9vg262w5/1/
范围内的随机数不是随机的
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.