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>
时间： 2024-11-18 20:36:53

js实现网页标题栏闪烁提示效果代码的相关文章

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

本文实例讲述了js实现网页标题栏闪烁提示效果的方法.分享给大家供大家参考.具体分析如下: 网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总结一款实现网页标题栏闪烁提示代码,感兴趣可参考一下. 公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 复制代码 代码如下: var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示

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

 网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总结一款实现网页标题栏闪烁提示代码,感兴趣可参考一下. 公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 代码如下: var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示 show:function(){ var temps = newMessageRemind._ti

JS实现超简洁网页title标题跑动闪烁提示效果代码_javascript技巧

本文实例讲述了JS实现超简洁网页title标题跑动闪烁提示效果代码.分享给大家供大家参考,具体如下: 这里演示不几行JS代码实现的网页Title文字跑动效果,类似有消息时的标题闪烁提醒功能,在JS代码中,当变量_record累加到3是,将其赋值为1.相当于无限循环.需要显示的消息提示内容可自拟哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-blink-style-codes/ 具体代码如下: <html xmlns="

JS实现的车标图片提示效果代码_javascript技巧

本文实例讲述了JS实现的车标图片提示效果.分享给大家供大家参考.具体如下: 这是一款基于JavaScript的鼠标提示效果,名车车标展示提示效果-鼠标移过时显示车标图片,页面打开后并不显示车标,只有当鼠标移在车标上的时候,车标才突然出现,类似Js提示特效,本代码兼容性也写的不错,代码也并不复杂,大部分是调用图片的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-car-ico-alert-style-demo/ 具体代码如下: <!DOC

js文字链接的热点提示效果代码_文字特效

CSS W3C创建CSS标准的目的是以CSS取代HTMLHyper Text Mark-up Language 超文本标记语言表格式布局.帧和其他表现的语言.纯CSS布局与结构式XHTMLThe Extensible HyperText Markup Language 可扩展超文本标记语言相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易.

javascript tips提示效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title>网页特效 tips提示效果代码</title> <style type="text/css教程&quo

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

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

js实现的简洁网页滑动tab菜单效果代码_javascript技巧

本文实例讲述了js实现的简洁网页滑动tab菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款风格简洁的网页滑动门代码,基于JS和Div+CSS实现.滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-div-hd-tab

JS实现网页右侧带动画效果的伸缩窗口代码_javascript技巧

本文实例讲述了JS实现网页右侧带动画效果的伸缩窗口代码.分享给大家供大家参考,具体如下: 这是一款带缓冲效果的网页右侧固定伸缩窗口,点击带颜色的区域,浮动的层窗口就会伸缩出来,再次点击则缩进去.无jQuery,完全JavaScript实现的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-dh-dlg-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH