利用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 相关文章推荐
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
简单的js表单验证函数
Oct 28 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
做网页的一些技巧
2007/02/01 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
详解webpack 入门与解析
2018/04/09 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Pytorch释放显存占用方式
2020/01/13 Python
python map比for循环快在哪
2020/09/21 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
员工自我鉴定范文
2013/10/06 职场文书
自荐信结尾
2013/10/27 职场文书
电子商务专业个人的自我评价
2013/11/19 职场文书
企业承诺书怎么写
2014/05/24 职场文书
大专学生求职自荐信
2014/07/06 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫