Javascript 顏色閃爍

在網站開發過程中，顏色閃爍的效果可以用來吸引用戶的注意力，比如在某些按鈕被點擊后，讓按鈕背景顏色快速切換幾次。這種效果可以通過javascript來實現。

下面是一個簡單的例子，當用戶點擊按鈕時，按鈕的背景顏色會來回閃爍。

<code>
const button = document.querySelector('button');
function blink() {
button.style.backgroundColor = 'red';
setTimeout(() => {
button.style.backgroundColor = 'green';
}, 500);
}
button.addEventListener('click', () => {
setInterval(blink, 1000);
});
</code>

在這個例子中，我們首先選中了一個button元素，然后定義了一個blink函數。blink函數有兩個步驟：讓背景顏色變成紅色，然后過了500毫秒后再變成綠色。接著我們給button添加了一個點擊事件監聽器，當按鈕被點擊后，我們使用setInterval來重復執行blink函數，讓背景顏色來回閃爍。

除了點擊事件，我們還可以使用鼠標懸停事件來觸發閃爍效果，比如在下面的例子中，當鼠標懸停在一個元素上時，元素會發生顏色閃爍的效果。

<code>
const div = document.querySelector('div');
function blink() {
div.style.backgroundColor = 'blue';
setTimeout(() => {
div.style.backgroundColor = 'white';
}, 300);
}
div.addEventListener('mouseover', () => {
setInterval(blink, 500);
});
div.addEventListener('mouseout', () => {
clearInterval();
div.style.backgroundColor = 'white';
});
</code>

這個例子中，我們選擇了一個div元素，然后定義了一個blink函數。blink函數有兩個步驟：把背景顏色改成藍色，然后過了300毫秒后再變成白色。我們給div添加了鼠標懸停和鼠標移出事件監聽器。當鼠標懸停在元素上時，我們使用setInterval來重復執行blink函數，讓背景顏色來回閃爍。當鼠標移出時，我們使用clearInterval停止閃爍，并把背景顏色變回白色。

除了使用定時器來控制閃爍效果，我們還可以通過CSS3動畫來實現。比如，下面的例子中，當用戶點擊按鈕時，其顏色會閃爍，這個效果通過CSS3 @keyframes來實現。

<code>
const button = document.querySelector('button');
button.addEventListener('click', () => {
button.classList.add('blink');
});
button.addEventListener('animationend', () => {
button.classList.remove('blink');
});
</code>

<code>
button.blink {
animation: blinker 0.3s linear 5;
}
@keyframes blinker {
from { background-color: #ff0033; }
to { background-color: #fff; }
}
</code>

在這個例子中，我們首先選擇了一個button元素，然后給它添加了一個點擊事件監聽器。當按鈕被點擊時，我們把blink類添加到按鈕上，這個類包含了一個CSS3動畫，動畫名稱是blinker，持續時間是0.3秒，動畫效果是線性的，動畫會重復5次。同時我們還定義了一個@keyframes，這個關鍵幀規定了動畫的從哪開始和到哪結束。當動畫結束后，我們給按鈕移除了blink類，讓閃爍效果停止。

總之，通過javascript和CSS3動畫，我們可以輕松實現網頁中的顏色閃爍效果，讓我們的網頁更加生動有趣。