Question

我正在复制一个西蒙游戏原型，我正在尝试为香草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-animation，就这样做:-)

Answer 2

相关代码实际上并不在您的问题中。

听起来你需要关注三个事件：

突出显示颜色
颜色变暗
突出显示下一个颜色

您的问题是1到2之间的时间与1到3（1秒）之间的时间相同（或小于）。

您需要增加1到3之间的时间，以便在再次突出显示之前可以调暗颜色。 1.25秒可能是一个不错的选择。

香草javascript中的按钮闪烁效果

2 个答案: