利用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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
vue购物车插件编写代码
Nov 27 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
利用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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
JS delegate与live浅析
2013/12/21 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
党支部公开承诺书
2014/03/28 职场文书
公司承诺书格式
2014/05/21 职场文书
教师群众路线心得体会
2014/11/04 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
礼貌问候语大全
2015/11/10 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python