Javascript中的Flash/blink選項卡效果

Question

我正在用Javascript/PHP創建簡單的聊天。例如，當我在Facebook上發佈新消息時，我想閃爍/眨眼選項卡。我怎樣才能做到這一點？

Answer 1

下面是示例代碼：

(function() { 

var original = document.title; 
var timeout; 

window.coders = function (newMsg, howManyTimes) { 
    function step() { 
     document.title = (document.title == original) ? newMsg : original; 

     if (--howManyTimes > 0) { 
      timeout = setTimeout(step, 1000); 
     }; 
    }; 

    howManyTimes = parseInt(howManyTimes); 

    if (isNaN(howManyTimes)) { 
     howManyTimes = 5; 
    }; 

    cancelcoders(timeout); 
    step(); 
}; 

window.cancelcoders = function() { 
    clearTimeout(timeout); 
    document.title = original; 
}; 

}()); 

您可以使用此代碼類似：

coders("New Message from Bhavin Solanki"); 

......或者......

coders("New Message from Bhavin Solanki", 20); // toggles it 20 times. 

Answer 2

你最好在CSS中執行動畫，並使用JavaScript來啓動和停止動畫。你因爲沒有表現出解決方案的嘗試而陷入低谷。

(function(){ 
 
    var message = document.querySelector('.message'), 
 
     button = document.querySelector('#button'); 
 

 
    button.addEventListener('click', blink, false); 
 

 
    // this is where you toggle the class 
 
    function blink(e){ 
 
    message.classList.toggle('blink'); 
 
    } 
 
})();

@keyframes blink { 
 
    from { 
 
     background-color: red; 
 
     color: white; 
 
    } 
 
    to { 
 
     background-color: white; 
 
     color: red; 
 
    } 
 
} 
 

 
.message { 
 
    text-align: center; 
 
} 
 

 
/* run the animation on .message when it also has the class .blink */ 
 
.message.blink { 
 
    animation: blink 1s linear infinite alternate; 
 
}

<div class="message">You've got a message</div> 
 
<button id="button">blink</button>