利用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 相关文章推荐
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
Vue.js的模板语法详解
Feb 16 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
MyEclipse常用配置图文教程
2014/09/11 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
项目实践之javascript技巧
2007/12/06 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
python实现字符串加密成纯数字
2019/03/19 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Keras自定义IOU方式
2020/06/10 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
北承题目(C++)
2012/05/16 面试题
营销人才自我鉴定范文
2013/12/25 职场文书
家长会主持词
2014/03/26 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python