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 相关文章推荐
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 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
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
ajax异步请求详解
2017/01/06 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python二叉树的实现实例
2013/11/21 Python
一个超级简单的python web程序
2014/09/11 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
《燕子专列》教学反思
2014/02/21 职场文书
大班幼儿评语大全
2014/04/30 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android