利用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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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正则表达式(regar expression)
2011/09/10 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
降低PHP Redis内存占用
2017/03/23 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jQuery 选择器详解
2015/01/19 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
python实现数独算法实例
2015/06/09 Python
浅谈Python单向链表的实现
2015/12/24 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
房产转让协议书
2014/04/11 职场文书
项目经理任命书内容
2014/06/06 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
三国演义读书笔记
2015/06/25 职场文书
七年级思品教学反思
2016/02/20 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
六年级作文之自救
2019/12/19 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python