利用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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
利用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如何透过ODBC来存取数据库
2006/10/09 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
用正则获取指定路径文件的名称
2007/02/27 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
python中self原理实例分析
2015/04/30 Python
python实现井字棋游戏
2020/03/30 Python
window下eclipse安装python插件教程
2017/04/24 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
高中自我评价范文
2014/01/27 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
大学学习计划书范文
2014/05/02 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫