javascript - Vanilla javascript中的按钮闪烁效果

Question

我正在复制一个 simon 游戏原型(prototype)，我正在尝试在 vanilla js 中为按钮闪烁编写一个函数。

目前我有以下功能:

function blinkColor(color) {
  let colorButton = document.getElementById(color);
  colorButton.style.background = *highlightColor*;  
  setTimeout(() => {colorButton.style.background = *originalColor*}, 1000);
}

我将按钮颜色替换为另一种更亮的颜色，然后在超时后再次将其改回。当连续的颜色彼此不同但是当它需要多次闪烁相同的颜色时(例如“红色”，“红色”，“红色”)，它会起作用，它不会在闪烁之间留下中断，并且它看起来它只是长时间眨眼。

有没有更好的方法来编写这个功能？

Answer 1

您可以比较颜色，当突出显示的颜色与当前颜色相同时使用默认颜色:

function blinkColor(color) {
  let colorButton = document.getElementById(color);
  colorButton.style.background = *highlightColor*;
  if(highlightColor == colorButton.style.background){
    setTimeout(() => {colorButton.style.background = *white(i.e.)*}, 1000);
  } else {
    setTimeout(() => {colorButton.style.background = *originalColor*}, 1000);
  }
}

您必须执行比较以检查颜色类型(rgb、rgba、hex...)，如果您有可能为此使用 css 动画，那就去做吧:-)