利用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 相关文章推荐
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
js 走马灯简单实例
Nov 21 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
python对url格式解析的方法
2015/05/13 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python变量和字符串详解
2017/04/29 Python
Python实现的堆排序算法示例
2018/04/29 Python
Django之模型层多表操作的实现
2019/01/08 Python
如何基于Python批量下载音乐
2019/11/11 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
解决python3输入的坑——input()
2020/12/05 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
费用申请报告范文
2015/05/15 职场文书
婚宴领导致辞
2015/07/28 职场文书