利用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结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
利用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 session 预定义数组
2009/03/16 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python 常用的安装Module方式汇总
2017/05/06 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python基于WordCloud制作词云图
2019/11/29 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
小学网上祭英烈活动总结
2014/07/05 职场文书
商铺消防安全责任书
2014/07/29 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
财务务虚会发言材料
2014/10/20 职场文书
考察邀请函范文
2015/01/31 职场文书
库房管理员岗位职责
2015/02/12 职场文书
2015年科协工作总结
2015/05/19 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技