如何刷新網站的背景？

我試圖創建一個函數，每當你打電話時閃爍網站。如何刷新網站的背景？

我的做法是這樣的：

function flashRed() { 
 
    document.body.style.animation = "redflash 0.06s 2 alternate ease-out"; 
 
} 
 

 
function flashGreen() { 
 
    document.body.style.animation = "greenflash 0.06s 2 alternate ease-out" 
 
}

@keyframes redflash { 
 
    to { 
 
    background-color: #FFCDD2; 
 
    } 
 
} 
 
@keyframes greenflash { 
 
    to { 
 
    background-color: #C8E6C9; 
 
    } 
 
}

<input type="button" value="RED" onclick="flashRed()"> 
 
<input type="button" value="GREEN" onclick="flashGreen()">

不過這樣一來，我只能讓它閃爍一次，作爲動畫屬性被設置在第一時間或變更。

如何更改我的代碼或使用不同的方法使其像我想要的那樣頻繁閃爍？

來源

2016-10-03 juwi

添加和使用的超時刪除類...

function flashRed() { 
 
    document.body.classList.add('red') 
 
    window.setTimeout(function() { 
 
    document.body.classList.remove('red') 
 
    }, 100) 
 

 
} 
 

 
function flashGreen() { 
 
    document.body.classList.add('green') 
 
    window.setTimeout(function() { 
 
    document.body.classList.remove('green') 
 
    }, 100) 
 
}

@keyframes redflash { 
 
    to { 
 
    background-color: #FFCDD2; 
 
    } 
 
} 
 
@keyframes greenflash { 
 
    to { 
 
    background-color: #C8E6C9; 
 
    } 
 
} 
 
.red { 
 
    animation: redflash 0.06s 2 alternate ease-out; 
 
} 
 
.green { 
 
    animation: greenflash 0.06s 2 alternate ease-out; 
 
}

<input type="button" value="RED" onclick="flashRed()" id="red"> 
 
<input type="button" value="GREEN" onclick="flashGreen()" id="green">

來源

2016-10-03 05:33:15

謝謝！這工作完美。順便說一句。我討厭JS;） – juwi

@juwi哈哈！但是，當你品嚐到它時，你會愛上它！ –

而不是使用關鍵幀動畫，只需添加/與超時刪除類。

這裏有一個功能，你可以在課堂上通過，次數要閃光：

https://jsfiddle.net/1vzzaqvw/2/

function flash(cssClass, flashNum, delay, total) { 
    if(typeof total === 'undefined') total = 1; 
    if(typeof delay === 'undefined') delay = 500; 
    document.body.classList.add(cssClass); 
    setTimeout(function(){ 
    document.body.classList.remove(cssClass); 
    if(total < flashNum) { 
     setTimeout(function(){ 
      flash(cssClass, flashNum, delay, ++total); 
     },delay); 
    } 
    },delay); 
}

然後就可以調用它，即flash('red', 3)，這將刷新紅班3次。

來源

2016-10-03 05:40:23 Johannes

每個函數執行完成後，您需要清除.animation。話雖如此，還通過清除他們，你將無法看到效果，所以你將不得不使用setTimeOut

function flashRed() { 
    setTimeout(function(){ document.body.style.animation = "redflash 0.06s 2 alternate ease-out"; }, 100); 

     document.body.style.animation=""; 
    } 

function flashGreen() { 
setTimeout(function(){ document.body.style.animation = "greenflash 0.06s 2 alternate ease-out" }, 100); 
    document.body.style.animation = ""; 
}

https://jsfiddle.net/7t1m517t/1/

來源

2016-10-03 05:43:04

正如你所說，動畫只能使用一次，因爲運行animation屬性已設置。要允許連續多次運行同一動畫，可以在動畫完成後清除animation屬性。

有幾種方法可以做到這一點，一種簡單的方法是使用window.setTimeout函數。

function flashRed() { 
 
    document.body.style.animation = "redflash 0.6s 2 alternate ease-out"; 
 
    window.setTimeout(function(){ 
 
    document.body.style.animation = ""; 
 
    }, 0600); 
 
} 
 

 
function flashGreen() { 
 
    document.body.style.animation = "greenflash 0.6s 2 alternate ease-out"; 
 
    window.setTimeout(function(){ 
 
    document.body.style.animation = ""; 
 
    }, 0600); 
 
}

@keyframes redflash { 
 
    to { 
 
    background-color: #FFCDD2; 
 
    } 
 
} 
 
@keyframes greenflash { 
 
    to { 
 
    background-color: #C8E6C9; 
 
    } 
 
}

<input type="button" value="RED" onclick="flashRed()"> 
 
<input type="button" value="GREEN" onclick="flashGreen()">

來源

2016-10-03 05:46:55

如何刷新網站的背景？

回答

相關問題