利用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实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
javascript实现滚轮轮播图片
Dec 13 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自动生成月历代码
2006/10/09 PHP
一段防盗连的PHP代码
2006/12/06 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
jquery 问答知识整理
2010/02/11 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
document.write的几点使用心得
2014/05/14 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
js实现拖拽功能
2017/03/01 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
vue-loader教程介绍
2017/06/14 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
django输出html内容的实例
2018/05/27 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
pycharm的python_stubs问题
2020/04/08 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
安康杯竞赛活动总结
2014/05/05 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
南湾猴岛导游词
2015/02/09 职场文书
期末个人总结范文
2015/02/13 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python