Sow nothing reap nothing

JQuery简单实现网页title闪烁提示

已有5,404次关注

效果截图:
JQuery简单实现网页title闪烁提示.gif

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页title闪烁提示</title>
</head>
<body>
    <button type="button" id="begin">开始</button>
    <button type="button" id="end">结束</button>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/flashing.js"></script>
</html>

JS代码:

(function(window,$){
        
    var interval; 
    var titleDefault;
    
    flashing = {
        
        beginChange: function(){
            titleDefault = $("title").text();
            let newTitle = "【新消息】" + titleDefault;
            let oldTitle = "" + titleDefault;
            let i = 0 ;
            interval = setInterval(function(){
                if(i == 0){
                    $("title").text(newTitle);
                    i = 1;
                }else{
                    $("title").text(oldTitle);
                    i = 0;
                }
            },1000);
        },
        
        endChange: function(){
            clearInterval(interval);
            $("title").text(titleDefault);
        },
        
    }
    
    $(function(){
        $("#begin").on("click", flashing.beginChange);
        $("#end").on("click", flashing.endChange);
    })
    
})(window,$)

仅有一条评论

  1. 牛牛

    这个很实用

已自动关闭评论