javascript - 如何使闪烁背景变成一种颜色(通知)

Question

当用户收到通知时，我从数据库中检查它并将通知框置于闪烁状态。但我想在用户单击查看通知时取消闪烁并使其成为一种颜色。例如;当我点击时，背景将为红色并且不会改变。

HTML:

<li id="notification-box" style="float:right; background-color:#4f5f6f;color: #1c87c9; ">
    <a href="#" data-toggle="control-sidebar"><i class="fa fa-bell-o"></i></a> 
</li> 

Javascript:

<script>
    var i = 0;
        function change() {
          var doc = document.getElementById("notification-box");
          var color = ["#ff1818","#4f5f6f"];
          doc.style.backgroundColor = color[i];
          i = (i + 1) % color.length;
        }
        setInterval(change, 750);
</script>

我可以通过以下方式执行此操作，但通知框中有一个图标(fa-bell-o)。当用户单击此图标时，自然会使图标的背景变成一种颜色，通知框继续闪烁。

$(document).ready(function(){
    $('#notification-box').click(function(e){
        $(e.target).css('backgroundColor', 'red');
    });
});

所有的建议都适合我； ajax、jquery、javascript

Answer 1

当您使用 setInterval() 创建眨眼功能时您需要首先将其返回值存储在变量中，例如:

var timer = setInterval(change, 750);

当您点击$('#notification-box')时，您只需调用 clearInterval()方法来停止计时器，以便 change 函数调用也停止，如下所示:

$('#notification-box').click(function(e){
    $(e.target).css('backgroundColor', 'red');
    clearInterval(timer);
});