如何在 javascript 或 css 中无限地单击时更改按钮背景颜色？

Question

我创建了一个按钮，将背景颜色更改为渐变，当我双击它时，它会返回。当我单击按钮时，它会将自身的颜色和文本（hello）更改为渐变和文本（hi），但是当我双击它时，按钮不会返回，它只显示渐变和文本（hi） 。我尝试了回答“单击时切换按钮背景颜色”问题的代码，它们也不起作用。你能帮我解决这个问题吗？

我尝试了一些在堆栈溢出中找到的 JavaScript 代码。但它不起作用。

function myFunction() {
  document.body.style.background = "linear-gradient(orange, white, green)";
}

function myFunction2() {
  document.body.style.background = "#22232e";
}

<button onclick="myFunction()" ondblclick="myFunction2()">
<span>hello</span>
<span>hi</span>
</button>

Answer 1

您可以使用 css transition 属性来实现此目的。如果您希望它连续改变其背景颜色，那么您可以尝试 keyframes 动画。对于点击事件，您可以使用 ':focus' 伪类。例如 --- --- CSS 属性

#button{
   background-color: red;

   transition: background-color 2s linear;
}

#button:focus{

background-color: purple;

}

或者您可以使用关键帧动画。单击按钮后，它将无限循环地更改背景颜色。例如---

#I{
            background-color: black;
            transition: background-color 2s linear ;
            color: wheat;
}

@keyframes colors {
            from{
                background-color: red;
            }
            to{
                background-color: purple;
            }
}
#I:focus{
            animation: colors 2s linear infinite alternate;
}