利用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 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
用JQUERY增删元素的代码
Feb 14 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
React简单介绍
May 24 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 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
如何做到多笔资料的同步
2006/10/09 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
党员创先争优承诺书
2014/03/26 职场文书
员工自我工作评价
2015/03/06 职场文书
小兵张嘎观后感
2015/06/03 职场文书
2016教师节问候语
2015/11/10 职场文书