每5秒隨機顏色-有解無憂

我有隨機顏色的代碼，我從這里的某個人那里得到了它，但是當我嘗試將它放在 h3 標簽中時我不起作用，誰能幫助我？

function generateRandomColor()
{
  var randomColor = '#' Math.floor(Math.random()*16777215).toString(16);
  if(randomColor.length != 7) {
    randomColor = generateRandomColor();
  }
  return randomColor;
  // The random color will be freshly served
}

var h3 = document.getElementsByTagName("h3");

window.setInterval(function(){
  h3.style.color = generateRandomColor()
}, 5000);

uj5u.com熱心網友回復：

您的問題是您的h3變數指的是HTMLCollection，而不是單個元素。出于這個原因，您需要遍歷這些元素，而不是嘗試直接在上設定樣式h3，如下所示：

function generateRandomColor()
{
  var randomColor = '#' Math.floor(Math.random()*16777215).toString(16);
  if(randomColor.length != 7) {
    randomColor = generateRandomColor();
  }
  return randomColor;
  // The random color will be freshly served
}

var h3 = document.getElementsByTagName("h3");

window.setInterval(function(){
  Array.from(h3).forEach(function (elem) {
    elem.style.color = generateRandomColor();
  })
}, 5000);

<h3>Test</h3>
<h3>Test2</h3>
<h3>Test3</h3>

如果您希望它們都是相同的顏色，您只需移動generateRandomColor()回圈外部，如下所示：

window.setInterval(function(){
  var color = generateRandomColor();
  Array.from(h3).forEach(function (elem) {
    elem.style.color = color;
  })
}, 5000);

uj5u.com熱心網友回復：

問題是您試圖h3在回傳它們串列的頁面上獲取所有內容。如果您只想為單個元素更改它，那么只需更改getElementsByTagName為querySelector這樣。

function generateRandomColor()
{
  var randomColor = '#' Math.floor(Math.random()*16777215).toString(16);
  if(randomColor.length != 7) {
    randomColor = generateRandomColor();
  }
  return randomColor;
  // The random color will be freshly served
}

var h3 = document.querySelector("h3");

window.setInterval(function(){
  h3.style.color = generateRandomColor()
}, 5000);

<h3>Header!</h3>

如果您希望它適用于所有h3元素，您可以這樣做。

function generateRandomColor()
{
  var randomColor = '#' Math.floor(Math.random()*16777215).toString(16);
  if(randomColor.length != 7) {
    randomColor = generateRandomColor();
  }
  return randomColor;
  // The random color will be freshly served
}

var headers = document.querySelectorAll("h3");

window.setInterval(function(){
  for(var h3 of headers) {
    h3.style.color = generateRandomColor()
  }
}, 5000);

<h3>Header 1!</h3>
<h3>Header 2!</h3>
<h3>Header 3!</h3>

uj5u.com熱心網友回復：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     h3 {
      font-size : 45px;
     }
    </style>
</head>

<body>
    <h3>Hi Good to see that </h3>
    <script>
        function generateRandomColor() {
            var randomColor = '#'   Math.floor(Math.random() * 16777215).toString(16);
            if (randomColor.length != 7) {
                randomColor = generateRandomColor();
            }
            return randomColor;
            // The random color will be freshly served
        }

        var h3 = document.getElementsByTagName("h3");

        window.setInterval(function () {
            <!-- setting the random color -->
            h3[0].style.color = generateRandomColor();
        }, 5000);
    </script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476435.html

標籤：javascript

上一篇：使用Mutablelivedata從DialogFragmentColorPicker更改片段的背景顏色不起作用

下一篇：每隔幾秒旋轉一次物件