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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
简明json介绍
Sep 28 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
JS变量及其作用域
Mar 29 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
限制文本字节数js代码
2007/03/06 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
JavaScript实现前端分页控件
2017/04/19 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python爬虫文件下载图文教程
2018/12/23 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python django生成迁移文件的实例
2019/08/31 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
物流管理专业毕业生求职信
2014/03/23 职场文书
服务口号大全
2014/06/11 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
离职报告范文
2014/11/04 职场文书
药店收银员岗位职责
2015/04/07 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
2015国庆节宣传语
2015/07/14 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript