JavaScript中的闪烁/闪烁选项卡效果

Question

我正在用Javascript/PHP创建一个简单的聊天系统。我想在新消息到来时闪烁标签页，就像Facebook一样。我应该如何实现这个功能呢？

- Stock Overflow

---

浏览器标签页？尝试这样做：https://dev59.com/nW855IYBdhLWcg3wYjSF#24025860 - Andrew Brooke

也许你是对的，但我没有任何想法去做那件事。现在，我有了。 - Stock Overflow

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");

... or...

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

- Bhavin Solanki

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>

- synthet1c