彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > js完成网页标题栏闪烁提醒成效实例剖判

js完成网页标题栏闪烁提醒成效实例剖判

发布时间:2019-08-31 22:21编辑:学会党委浏览(120)

    js实现网页标题栏闪烁提示效果实例分析

     网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总结一款实现网页标题栏闪烁提示代码,感兴趣可参考一下。

    公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息。具体实现代码如下:

    代码如下:

    var newMessageRemind={
    _step: 0,
    _title: document.title,
    _timer: null,
    //显示新消息提示
    show:function(){
    var temps = newMessageRemind._title.replace("【   】", "").replace("【新消息】", "");
    newMessageRemind._timer = setTimeout(function() {
    newMessageRemind.show();
    //这里写Cookie操作
    newMessageRemind._step++;
    if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };
    if (newMessageRemind._step == 1) { document.title = "【   】" + temps };
    if (newMessageRemind._step == 2) { document.title = "【新消息】" + temps };
    }, 800);
    return [newMessageRemind._timer, newMessageRemind._title];
    },
    //取消新消息提示
    clear: function(){
    clearTimeout(newMessageRemind._timer );
    document.title = newMessageRemind._title;
    //这里写Cookie操作
    }
    };

    调用显示新消息提示:newMessageRemind.show();
    调用取消新消息提示:newMessageRemind.clear();
    看了上面代码自己再进行优化一下,不管怎样,自己能吸收学习到就好了。:)我主要是觉得他代码里面 newMessageRemind 这字段用得太多了,看起来密密麻麻的,多不舒服啊,想着换一种小清新的方式展现出来,于是乎就有了下面的代码:

    代码如下:

    var newMessageRemind = function () {
        var i = 0,
            title = document.title,
            loop;
     
        return {
            show: function () {
                loop = setInterval(function () {
                    i++;
                    if ( i == 1 ) document.title = '【新消息】' + title;
                    if ( i == 2 ) document.title = '【   】' + title;
                    if ( i == 3 ) i = 0;
                }, 800);
            },
            stop: function () {
                clearInterval(loop);
                document.title = title;
            }
        };
    } ();

    是不是清新了很多呢?^_^

    代码如下:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>放假啦!!!</title>
    </head>
    <body>
    <button id="test">stop</button>
    <script type="text/javascript">
    var newMessageRemind = function () {
     var i = 0,
      title = document.title,
      loop;
     return {
      show: function () {
       loop = setInterval(function () {
        i++;
        if ( i == 1 ) document.title = '【新消息】' + title;
        if ( i == 2 ) document.title = '【   】' + title;
        if ( i == 3 ) i = 0;
       }, 800);
      },
      stop: function () {
       clearInterval(loop);
       document.title = title;
      }
     };
    } ();
    newMessageRemind.show();
    document.getElementById('test').onclick = function () {
     newMessageRemind.stop();
    };
    </script>
    </body>
    </html>

    网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总...

    相关文章

    相关搜索:

    今天看啥

    搜索技术库

    返回首页

    • WPF好看的进度条实现浅谈(效果有点类似VS
    • ASP.NET:注销功能实现,asp.net注销功能
    • [ C# ] 判断一个类是否实现了某个接口的多种
    • [ C# ] 判断一个类是否实现了某个接口的多种
    • 简洁的drag效果,自由拖拽div的实现及注意点
    • 实现Android Studio JNI开发C/C++使用__android_log_p

    相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

    帮客评论

    本文由彩世界平台发布于学会党委,转载请注明出处:js完成网页标题栏闪烁提醒成效实例剖判

    关键词: