利用JS实现浏览器的title闪烁


Posted in Javascript onJuly 08, 2013

主要是通过setTimeout方法设置一个定时器,切换消息提示,从而达title到消息提示的闪烁。

<html>  
<head>  
    <title>JS效果-浏览器标题栏闪烁</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <script type="text/javascript">  
        // 使用message对象封装消息  
        var message = {  
            time: 0,  
            title: document.title,  
            timer: null,  
            // 显示新消息提示  
            show: function () {  
                var title = message.title.replace("【 】", "").replace("【新消息】", "");  
                // 定时器,设置消息切换频率闪烁效果就此产生  
                message.timer = setTimeout(function () {  
                    message.time++;  
                    message.show();  
                    if (message.time % 2 == 0) {  
                        document.title = "【新消息】" + title  
                    }  
                    else {  
                        document.title = "【
 】" + title  
                    };  
                }, 600);  
                return [message.timer, message.title];  
            },  
            // 取消新消息提示  
            clear: function () {  
                clearTimeout(message.timer);  
                document.title = message.title;  
            }  
        };  
        message.show();  
        // 页面加载时绑定点击事件,单击取消闪烁提示  
        function bind() {  
            document.onclick = function () {  
                message.clear();  
            };  
        }  
    </script>  
</head>  
<body>  
    点击页面取消消息闪烁提示  
</body>  
</html>

Javascript 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
提高网站信任度的技巧
Oct 17 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 #Javascript
使用jquery实现简单的ajax
Jul 08 #Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 #Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 #Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 #Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 #Javascript
JQuery表格内容过滤的实现方法
Jul 05 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
PHP 采集心得技巧
2009/05/15 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
js 小数取整的函数
2010/05/10 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python实现五子棋小游戏
2020/03/25 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
python实现学生通讯录管理系统
2021/02/25 Python
Linux如何为某个操作添加别名
2013/03/01 面试题
办公室文秘自我评价
2013/09/21 职场文书
给物业的表扬信
2014/01/21 职场文书
六查六看剖析材料
2014/02/15 职场文书
企业人事任命书
2014/06/05 职场文书
销售工作决心书
2015/02/04 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
详解Node.js如何处理ES6模块
2021/05/15 Javascript
vue实现登陆页面开发实践
2022/05/30 Vue.js