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 09 Javascript
javascript 对象定义方法 简单易学
Mar 22 Javascript
js确定对象类型方法
Mar 30 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
npm全局环境变量配置详解
Dec 15 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
创联软件面试题笔试题
2012/10/07 面试题
年度考核评语
2014/01/19 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏