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();

另：单纯的这个代码会出现这么一个问题：
就是当你打开一个站点很多张页面的时候，如过有新消息，那么所有页面都会不停的闪，当你查看消息后其他页面仍会提示。

我们公司是通过使用Cookie的方式解决的，当查看新消息后所有标题闪动的页面将全部取消提示。

赞 (0)

相关推荐

  • JavaScript实现标题栏文字轮播效果代码

    JavaScript实现标题栏文字轮播效果代码

    本文实例讲述了JavaScript实现标题栏文字轮播效果代码.分享给大家供大家参考,具体如下: 这里演示的JS文字轮播,显示在标题栏区域,以前个人主页时候经常见到的效果,不过现在都规范了,标题栏一般都不加入这种效果了.但是可以学习一下JS制作实现一些文字特效,运行效果后请查看标题栏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-loop-show-style-demo/ 具体代码如下: <html> <head>

  • 标题过长使用javascript按字节截取字符串

    做为一个前端开发人员在网页展示中经常会碰到,标题过长,需要截取字符串,用CSS的实现的话各种兼容问题,各种坑. 让后台程序截一下,又各种推托,让后台按字节截一下更是和要了后台老命一样,最后可能只会安字符长度给你截一下,最后不好看,对不齐,还是回头整CSS.调兼容: 有以上有感触的前端同学默默点个赞吧. 最近接触一个项目,后台只提供接口(json),所有页面的数据渲染,数据绑定都都交给了前端.终于,不考虑SEO,页面所有的主动权到偶的手中了,不经意间就碰到字节截取老问题了. 网络上流传一个Java

  • JavaScript修改浏览器tab标题小技巧

    修改tab或者window的标题,是一项较老的实践.Gmail 用它来提示用户新的聊天消息,当有新的page通过AJAX加载的时候,本站同样用它更新tab title.这是怎样做到的呢?当时是通过设置document对象. 复制代码 代码如下: document.title = 'Hello!'; // New title :) 有一个常识性的错误是:你会以为应该去修改 window.title.但实际上,你应该使用document对象,否则你做的肯定是无用的.注意一下,你将会看到:很多时候会用

  • JS实现网页标题栏显示当前时间和日期的完整代码

    JS实现网页标题栏显示当前时间和日期的完整代码

    本文实例讲述了JS实现网页标题栏显示当前时间和日期的完整代码.分享给大家供大家参考,具体如下: 本效果实现在网页的标题栏最前端显示当前的时间和日期,还可以显示星期几,JS代码,不过代码在兼容性方面好像有些问题,如果是IE的话则正常显示,其它浏览器则看不到效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-show-date-time-codes/ 具体代码如下: <html> <head> <title&

  • Jquery修改页面标题title其它JS失效的解决方法

    Jquery代码 复制代码 代码如下: $("title").html("hello"); 后来只好用下面这段js代码来实现 Js代码 复制代码 代码如下: document.title="hello";

  • javascript 获取网页标题代码实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • JS动态改变浏览器标题的方法

    本文实例讲述了JS动态改变浏览器标题的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <hea

  • JavaScript实现带标题的图片轮播特效

    JavaScript实现带标题的图片轮播特效

    图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 CSS代码: <style type="text/css"> .body{ width:524px; border:solid 1px #666; margin-left:auto; margin-right:auto; } .bg{ background-color:#E0E0E0; height:20px; border-top:solid 1px #B4B4B4; } .number{

  • 拖动table标题实现改变td的大小(css+js代码)

    复制代码 代码如下: <html> <title>拖动列宽的表格</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"><!-- .bg td{ font-size:12px; text-align:left; line-height:1

  • JavaScript获取当前网页标题（title）的方法

    本文实例讲述了JavaScript获取当前网页标题(title)的方法.分享给大家供大家参考.具体如下: JS中的document.title可以获取当前网页的标题 <!DOCTYPE html> <html> <head> <title>jb51.net</title> </head> <body> current document's title is: <script> document.write(do

  • JS实现网页标题随机显示名人名言的方法

    JS实现网页标题随机显示名人名言的方法

    本文实例讲述了JS实现网页标题随机显示名人名言的方法.分享给大家供大家参考,具体如下: 这段代码实现每次刷新过后,网页的标题都会随机显示名人名言,一次一条,把这些名言定义在Javascript的数组内,每次调用随机调用一条,随机产生的随机数正好是数组的标号,这样就实现了随机,不错的效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-show-tips-style-codes/ 具体代码如下: <!DOCTYPE html

  • JavaScript在浏览器标题栏上显示当前日期和时间的方法

    本文实例讲述了JavaScript在浏览器标题栏上显示当前日期和时间的方法,分享给大家供大家参考.具体如下: 将这段脚本放到head区即可: <script language="JavaScript"> <!-- function resetIt() { // Calculate Time var timerID = null; var timerRunning = false; if(timerRunning) clearTimeout(timerID); time

随机推荐