2017-10-15 19 views
0

私のjavascriptプログラムでは、挨拶メッセージごとに異なる背景色を生成しようとしていますが、randomColorを使用して背景色を適用しましたが、誰がそれが間違っているか教えてくれますか?Javascript:挨拶メッセージごとに異なる色を表示

コード:

<!DOCTYPE html> 
<html> 
<head> 
    <title>trail6</title> 
</head> 
<body> 

    <p id="demo"></p> 

    <script> 

    var today = new Date() 
    var curHr = today.getHours() 

    if (curHr >= 0 && curHr < 6) { 
     document.getElementById("demo").innerHTML = 'What are you doing that early?'; 
    } else if (curHr >= 6 && curHr < 12) { 
     document.getElementById("demo").innerHTML = 'Good Morning'; 
    } else if (curHr >= 12 && curHr < 17) { 
     document.getElementById("demo").innerHTML = 'Good Afternoon'; 
    } else { 
     document.getElementById("demo").innerHTML = 'Good Evening'; 
    } 

    var colors = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95","#B6FDFF", "#A8FFC1", "#B6FF99"]; 
    var randomColor = colors[Math.floor(Math.random() * colors.length)];  
    document.getElementById("demo").style.backgroundColor = colors[randomColor]; 

</script> 

</body> 
</html> 

答えて

2

あなたがrandomColorを割り当てるとき、あなたはすでにcolorsアレイにアクセスです。 randomColorは16進コードに設定されます。

このように、document.getElementById("demo").style.backgroundColor = colors[randomColor]ではなく、document.getElementById("demo").style.backgroundColor = randomColorで直接格納された16進コードに背景色を設定するだけで済みます。

これは、次の例で見ることができます。

var today = new Date() 
 
var curHr = today.getHours() 
 

 
if (curHr >= 0 && curHr < 6) { 
 
    document.getElementById("demo").innerHTML = 'What are you doing that early?'; 
 
} else if (curHr >= 6 && curHr < 12) { 
 
    document.getElementById("demo").innerHTML = 'Good Morning'; 
 
} else if (curHr >= 12 && curHr < 17) { 
 
    document.getElementById("demo").innerHTML = 'Good Afternoon'; 
 
} else { 
 
    document.getElementById("demo").innerHTML = 'Good Evening'; 
 
} 
 

 
var colors = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95", "#B6FDFF", "#A8FFC1", "#B6FF99"]; 
 
var randomColor = colors[Math.floor(Math.random() * colors.length)]; 
 
document.getElementById("demo").style.backgroundColor = randomColor;
<p id="demo"></p>

は、この情報がお役に立てば幸い! :)

1

最後の行を見

のdocument.getElementById( "デモ")style.backgroundColor =色[randomColor]。この

のdocument.getElementById( "デモ")のような

変更をstyle.backgroundColor = randomColor。

ただテストされ、正常に動作するようです

debugger snapshot

関連する問題