文章/答案/技术大牛

发布

社区首页 >问答首页 >更改背景色，然后在计时器用完时返回原始颜色。

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

Stack Overflow用户

提问于 2015-07-12 05:59:10

回答 2查看 103关注 0票数 0

我需要些帮助。当计时器没有再次输入大量的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

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-12 06:05:25

尝试在您的javascript中使用

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

将“buttonID”更改为按钮的id。

票数 1

Stack Overflow用户

发布于 2015-07-12 06:17:08

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

.buttonStyleRed { background: red !important }

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31364868

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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