利用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对文本框值的判断示例
Mar 10 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
浅谈js闭包理解
Mar 28 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 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提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php牛逼的面试题分享
2013/01/18 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Python守护进程实现过程详解
2020/02/10 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
个人简历自我评价
2014/02/02 职场文书
数学教育专业求职信
2014/07/22 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
撤诉书怎么写
2015/05/19 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书