隨機數，隨機顏色循環
[英]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.