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表格控件(自写,网上没有的)
Jun 04 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
layui实现三级导航菜单
Jul 26 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 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
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
使用python存储网页上的图片实例
2018/05/22 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Django实现celery定时任务过程解析
2020/04/21 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
介绍一下Make? 为什么使用make
2013/12/08 面试题
浙江文明网签名寄语
2014/01/18 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
个人存款证明书
2014/10/18 职场文书
学生上课迟到检讨书
2015/01/01 职场文书