jQuery 标题消息闪烁提醒

骑猪看日落 2022-01-31 10:29 191阅读 0赞

示例图：

![20190516142109730.gif][]

源码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery 标题消息闪烁提醒</title>
    </head>
    <body>
    <h1 style="font-size: 24px;text-align: center;margin: 0;padding: 30px;">jQuery 标题消息闪烁提醒</h1>
    <div style="text-align: center;">
        <input type="button" value="开始闪烁" onclick="$.titleMsg.start();">
        <input type="button" value="结束闪烁" onclick="$.titleMsg.stop();">
    </div>
    <script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        /* jQuery类级别插件封装 */
        $.extend({
            titleMsg:{
                title:'',
                $title:$("title"),
                start:function () {
                    this.title=this.$title.html();
                    var flag=true,_this=this;
                    var change=function(){
                        if(flag){
                            flag=false;
                            _this.$title.html('【新消息】'+_this.title);
                        }else {
                            flag=true;
                            _this.$title.html('【　　　】'+_this.title);
                        }
                        window._titleMsgTime=setTimeout(function () {
                            change();
                        },600);
                    };
                    change();
                },
                stop:function () {
                    if(!this.title){
                        return;
                    }
                    this.$title.html(this.title);
                    window.clearTimeout(window._titleMsgTime);
                }
            }
        });
    </script>
    </body>
    </html>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[20190516142109730.gif]: /images/20220131/615e31c35330418391c61ac058cf8af2.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220131/168b9b100572499cb891585d84bfb4c8.png