更改背景顏色，然後在計時器用完時返回原始顏色

我需要一些幫助。有沒有什麼方法可以在定時器耗盡時再次輸入大量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>

來源

2015-07-12 melvin manangan

嘗試使用在你的JavaScript

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

改變 'buttonID' 到您按鈕的ID。

來源

2015-07-12 06:05:25

按鈕應該成爲綠色的再次漸變，而不是黑色。 –

將＃000000更改爲使其漸變爲綠色的代碼。就像現在的答案一樣。 –

我現在覺得很愚蠢。謝謝。的xD –

添加另一個具有紅色背景的班級並使用!important標誌。

.buttonStyleRed { background: red !important }

然後將新類添加到該元素在你的setTimeout並刪除它時，計時器已過期。將!important添加到元素時，應覆蓋正常背景。當您從該元素的類列表中刪除它時，.buttonStyle的常規css背景應該重新生效。

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

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

來源

2015-07-12 06:17:08

更改背景顏色，然後在計時器用完時返回原始顏色

回答

相關問題