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>

Javascript中的Flash /闪烁选项卡效果

2 个答案: