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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 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对二维数组进行排序的简单实例
2013/12/19 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python内存管理实例分析
2019/07/10 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python 中如何写注释
2020/08/28 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
优秀员工自荐书
2013/12/19 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
晨会主持词
2014/03/17 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
党员公开承诺书2015
2015/01/21 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
实习证明格式范文
2015/06/16 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android