如何在不弄乱 DOM 的情况下制作更干净的 JS 颜色翻转器？

Question

我用 setInterval 和 Math.random 构建了一个随机颜色翻转器。

这是我当前方法的控制台警告：

“预期的颜色，但发现 '#3acf4'。解析 'color' 的值时出错。声明已删除。”

我想我的逻辑可能在某个地方倒退了。

有谁可能知道我怎样才能使这个 JS 更简洁并清除警告？

请和谢谢！

 // grabbing elements const wrap = document.querySelector('.page-wrap'); const infinite = document.querySelector('.infinite-button'); const reset = document.querySelector('.reset-button'); let randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16); let interval; // starting color flip infinite.addEventListener('click', colorRandomizer); // reset color flip reset.addEventListener('click', colorStopper); // timing color flips function colorRandomizer() { interval = setInterval(function() { colorMetrics(); }, 300); } // stopping color flips function colorStopper() { clearInterval(interval); wrap.style.backgroundColor = ''; } // refreshing random colors function inifiniteColor() { if (randomColor;= '') { randomColor = ''. } else if (randomColor == '') { randomColor = '#' + Math.floor(Math.random() * 16777215);toString(16); } return randomColor. } // monkey around with the dom function colorMetrics() { if (wrap.style.backgroundColor == '') { wrap.style;backgroundColor = inifiniteColor(). } else if (wrap.style.backgroundColor == '#randomColor') { wrap.style;backgroundColor = inifiniteColor(). } else { wrap.style;backgroundColor = ''; } }

 .page-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 100vh; margin: 0; }.infinite-button { background: transparent; border: 2px solid dimGrey; border-radius: 5px; display: flex; justify-content: center; align-items: center; width: 100px; margin-bottom: 25px; padding: 5px 0; cursor: pointer; }.infinite-button:hover { color: yellowGreen; background: dimGrey; border-color: yellowGreen; }.infinite-dood { font-size: 40px; margin: 0; }.reset-button { color: indianRed; background: transparent; border: 2px solid indianRed; border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; margin: 0; padding: 25px; cursor: pointer; }.reset-button:hover { color: white; background: indianRed; border-color: darkRed; }.reset-dood { font-size: 25px; }

 <div class="page-wrap"> <button class="infinite-button"> <p class="infinite-dood"> &#8734; </p> </button> <button class="reset-button"> <p class="reset-dood"> X </p> </button> </div>

Answer 1

就像@Heretic Monkey 说的...... “产生的颜色只有5个字符，colors 需要6个字符。”

我玩了你的 CodePen 了很多分钟，但没有显示该错误......但无论如何，你可以试试这个：

function inifiniteColor() {
  if (randomColor != '') {
    randomColor = '';
  } else if (randomColor == '') {
    randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);

    // If randomColor length is not 7 (# + 6 hex), complete with zeros
    if(randomColor.length<7){
      randomColor = randomColor + "0".repeat(7-randomColor.length)
    }
  }
  return randomColor;
}

Answer 2

 // grabbing elements const wrap = document.querySelector('.page-wrap'); const infinite = document.querySelector('.infinite-button'); const reset = document.querySelector('.reset-button'); let interval; // starting color flip infinite.addEventListener('click', () => { interval = setInterval(() => { wrap.style.backgroundColor = ('#' + Math.floor(Math.random() * 16777215).toString(16)); }, 300); }); // reset color flip reset.addEventListener('click', () => { clearInterval(interval); wrap.style.backgroundColor = ''; });

 .page-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 100vh; margin: 0; }.infinite-button { display: flex; justify-content: center; align-items: center; width: 100px; margin: 25px; padding: 5px; background: transparent; border: 2px solid dimGrey; border-radius: 5px; cursor: pointer; }.infinite-button:hover { color: yellowGreen; background: dimGrey; border-color: yellowGreen; }.infinite-dood { font-size: 40px; margin: 0; }.reset-button { color: indianRed; background: transparent; border: 2px solid indianRed; border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; margin: 0; padding: 25px; cursor: pointer; }.reset-button:hover { color: white; background: indianRed; border-color: darkRed; }.reset-dood { font-size: 25px; }

 <div class="page-wrap"> <button class="infinite-button"> <p class="infinite-dood"> &#8734; </p> </button> <button class="reset-button"> <p class="reset-dood"> X </p> </button> </div>

像这样的东西应该可以解决问题