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>

​