利用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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
vue快捷键与基础指令详解
Jun 01 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
layer弹出层扩展主题的方法
Sep 11 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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/01/05 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php判断linux下程序问题实例
2015/07/09 PHP
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python函数装饰器实现方法详解
2018/12/22 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
python中的句柄操作的方法示例
2019/06/20 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
主管职责范文
2013/11/09 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
模范教师事迹材料
2014/02/10 职场文书
制作部班长职位说明书
2014/02/26 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
法人委托书范本
2014/04/04 职场文书
大学生党员承诺书
2014/05/20 职场文书
教师节寄语2015
2015/03/23 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python