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


Posted in Javascript onNovember 20, 2014

本文实例讲述了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>

继续分享一个

<script>
(function() {
  var OriginTitile = document.title, titleTime;
  document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      document.title = '死鬼去哪里了!';
      clearTimeout(titleTime);
    } else {
      document.title = '(つェ⊂)咦!又好了!';
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      },2000);
    }
  });
})();
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
javascript获取flash版本号的方法
Nov 20 #Javascript
Jquery对象和Dom对象的区别分析
Nov 20 #Javascript
深入理解javascript变量声明
Nov 20 #Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 #Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 #Javascript
jQuery提示效果代码分享
Nov 20 #Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 #Javascript
You might like
substr()函数中文版
2006/10/09 PHP
珊瑚虫IP库浅析
2007/02/15 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
python删除过期文件的方法
2015/05/29 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
浅析python实现动态规划背包问题
2020/12/31 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
节能标语大全
2014/06/21 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
消防演习感想
2015/08/10 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python