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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
JS二维数组的定义说明
Mar 03 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
JS关于刷新页面的相关总结
May 09 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
深入extjs与php参数交互的详解
2013/06/25 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
网吧消防安全制度
2014/01/28 职场文书
2015年班组工作总结
2015/04/20 职场文书
办公用品质量保证书
2015/05/11 职场文书
个人原因辞职信模板
2015/05/13 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
合作意向书怎么写
2019/06/24 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
Python实现为PDF去除水印的示例代码
2022/04/03 Python
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js