利用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 easyui combox一些实用的小方法
Dec 25 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
JS中封装axios来管控api的2种方式
Sep 11 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
供参考的 php 学习提高路线分享
2011/10/23 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
Python实现新浪博客备份的方法
2016/04/27 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
python实现简单多人聊天室
2018/12/11 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Django跨域请求原理及实现代码
2020/11/14 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
《油菜花开了》教学反思
2014/02/22 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
预备党员个人总结
2015/02/14 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书