更改背景颜色，然后在计时器用完时返回原始颜色答案

【问题标题】：change the background color and then return to original color when timer runs out更改背景颜色，然后在计时器用完时返回原始颜色
【发布时间】：2015-09-30 15:00:35
【问题描述】：

我需要一些帮助。有没有什么方法可以让按钮的背景颜色在计时器用完而不再次输入大量 CSS 代码时恢复到原始形式？是否可以在 Javascript 中导入整个 CSS 样式？你会注意到，当计时器用完时，背景仍然是红色，我希望它恢复到原来的渐变颜色。

<html>
<head>
<style>
.buttonStyle
{
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b9f005), color-stop(1, 

#98bf45));
    background:-moz-linear-gradient(top, #b9f005 5%, #98bf45 100%);
    background:-webkit-linear-gradient(top, #b9f005 5%, #98bf45 100%);
    background:-o-linear-gradient(top, #b9f005 5%, #98bf45 100%);
    background:-ms-linear-gradient(top, #b9f005 5%, #98bf45 100%);
    background:linear-gradient(to bottom, #b9f005 5%, #98bf45 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9f005', 

endColorstr='#98bf45',GradientType=0);
    background-color:#b9f005;
    border:1px solid #92e307;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:12px;
    font-weight:bold;
    padding:7px 34px;
    text-decoration:none;
    text-shadow:0px 1px 0px #86ae47;
    width:150px;
    text-align: center;
    padding: 3px;
}
.buttonStyle:hover {
    -moz-box-shadow: 0px 1px 16px 6px #cbfc60;
    -webkit-box-shadow: 0px 1px 16px 6px #cbfc60;
    box-shadow: 0px 1px 16px 6px #cbfc60;
    border: 1px solid green;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #98bf45), color-stop(1, 

#b9f005));
    background:-moz-linear-gradient(top, #98bf45 5%, #b9f005 100%);
    background:-webkit-linear-gradient(top, #98bf45 5%, #b9f005 100%);
    background:-o-linear-gradient(top, #98bf45 5%, #b9f005 100%);
    background:-ms-linear-gradient(top, #98bf45 5%, #b9f005 100%);
    background:linear-gradient(to bottom, #98bf45 5%, #b9f005 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#98bf45', 

endColorstr='#b9f005',GradientType=0);
    background-color:#98bf45;
}
.buttonStyle:active {
    position:relative;
    top:1px;
}

</style>

<script type = "text/javascript">

    var t;
    var isTimeron = false;
    var counter = 0;
function changeBG()
{
document.getElementById("but1").style.background="red";
}

    function stopMe()
    {
        isTimeron = false;
            clearTimeout(t);

    }

    function countdown()
    {
    document.getElementById("but1").value = counter;
        counter--;
        if (counter <= -1)
        {
stopMe();
document.getElementById("but1").value = "ROBOT COIN GAME";
enableVisit();
return;
    }
        t = setTimeout("countdown();", 1000);
    }

    function startMe()
    {
        if (!isTimeron)
        {
            counter = 5; //in seconds
            isTimeron = true;
            countdown();            
        }

    }


     </script>
</head>

<body>


<a href='' target = '_blank'><input title="punyeta" type = "button" id = "but1" value = "ROBOT COIN GAME" 

class='buttonStyle' onclick = "startMe(); changeBG();"/></a>

</body>
</html>

【问题讨论】：

标签： button background-color

【解决方案1】：

尝试在您的 javascript 中使用

document.getElementById("buttonID").style.background= '-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b9f005), color-stop(1, #98bf45))';

将 'buttonID' 更改为按钮的 ID。

【讨论】：

按钮应该再次变成绿色，渐变色，而不是黑色。
将 #000000 更改为代码，使其带有渐变的绿色。就像现在的答案一样。

【解决方案2】：

添加另一个带有红色背景的类并使用!important 标志。

.buttonStyleRed { background: red !important }

然后将新类添加到setTimeout 中的元素中，并在计时器到期时将其删除。 !important 应在将其添加到元素时覆盖正常背景。当您从该元素的类列表中删除它时，.buttonStyle 的常规 css 背景应该会重新生效。

document.getElementById("but1").classList.add("buttonStyleRed");

document.getElementById("but1").classList.remove("buttonStyleRed");

【讨论】：