js实现的标题栏新消息闪烁提示效果_javascript技巧

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

复制代码 代码如下:

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的方式解决的,当查看新消息后所有标题闪动的页面将全部取消提示。

时间: 2024-10-10 21:02:53

js实现的标题栏新消息闪烁提示效果_javascript技巧的相关文章

js简单实现删除记录时的提示效果_javascript技巧

样式 复制代码 代码如下: <style type="text/css"> body{font-size:13px} .divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px} .divShow span{padding-left:50px} .dialog{width:360px;border:solid 5px #666;position:absol

轻量级 JS ToolTip提示效果_javascript技巧

鼠标经过出现的提示效果,比title更漂亮,可订制.JS: 复制代码 代码如下: //---------------------------tooltip效果 start----------------------------------- //获取某个html元素的定位 function GetPos(obj){ var pos=new Object(); pos.x=obj.offsetLeft; pos.y=obj.offsetTop; while(obj=obj.offsetParent

js文本框输入内容智能提示效果_javascript技巧

本文实例讲述了js文本框输入内容智能提示效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 大体思路: 1.监听文本框事件.这里是用的keyup事件.大家可以尝试用onchange事件.不过感觉keyup事件的效果要好一点. 2.根据输入内容通过ajax异步的方式去访问后台数据. 3.遍历返回数据将数据添加到显示区域. 4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失. 5.后台数据应该拼接成json格式. 具体代码如下: <!DOCTYP

JavaScript与jQuery实现的闪烁输入效果_javascript技巧

本文实例讲述了JavaScript与jQuery实现的闪烁输入效果.分享给大家供大家参考,具体如下: html部分 <div id="code"> <p>/**</p> <p>*2014-2-12</p> <p>*代码自动闪烁输入</p> <p>*/</p> 2014-2-14,I want to say:<br /> Baby, I love you forever

鼠标滑过出现预览的大图提示效果_javascript技巧

当鼠标滑过图片时,图片会出现预览的大图,大图下面还会有介绍文字. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="图片提示效果.aspx.cs" Inherits="图片提示效果" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&

JS实现的仿淘宝交易倒计时效果_javascript技巧

本文实例讲述了JS实现的仿淘宝交易倒计时效果.分享给大家供大家参考,具体如下: <script type="text/javascript"> var StartTime = new Date("2015/11/11 12:34:03"); document.write("订购时间: " + StartTime.toLocaleDateString() + StartTime.toLocaleTimeString() + "

JS简单实现仿百度控制台输出信息效果_javascript技巧

本文实例讲述了JS简单实现仿百度控制台输出信息效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <h3>打开控

JS/jQ实现免费获取手机验证码倒计时效果_javascript技巧

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

JS仿hao123导航页面图片轮播效果_javascript技巧

hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ wi