Эффект Flash/blink tab в Javascript

Question

Я создаю простой чат в Javascript/PHP. Я хотел бы включить flash/blink tab, когда приходит новое сообщение, например, на 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>