利用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 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
Highcharts入门之简介
Aug 02 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
Angular实现表单验证功能
Nov 13 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 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 curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
php桥接模式应用案例分析
2019/10/23 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
js常用排序实现代码
2010/12/28 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python dataframe NaN处理方式
2019/12/26 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
小学生获奖感言范文
2014/02/02 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Django如何与Ajax交互
2021/04/29 Python