Question

我需要一些帮助。当计时器用完而没有再输入很多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>

Answer 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。

Answer 2

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

.buttonStyleRed { background: red !important }

然后将新类添加到setTimeout中的元素中，并在计时器到期时将其删除。将!important添加到元素时，.buttonStyle应覆盖正常背景。当您从该元素的类列表中删除它时，document.getElementById("but1").classList.add("buttonStyleRed");的常规css背景应该恢复生效。

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

String filename = "C:\\abcd\\Ttre.xls";

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

2 个答案: