通过闪烁标题来实现web消息通知的小demo

简介: 一段js代码模拟实现web消息推送的功能,通过闪烁文档的标题来实现,代码如下:

通过闪烁标题来实现web消息通知的小demo



一段js代码模拟实现web消息推送的功能,通过闪烁文档的标题来实现,代码如下:


var titleInit = document.title, isShine = true;
    setInterval(function() {
        var title = document.title;
        if (isShine == true) {
            if (/新/.test(title) == false) {
                document.title = '【你有新消息】';    
            } else {
                document.title = '【     】';
            }
        } else {
            document.title = titleInit;
        }
    }, 500);
    window.onfocus = function() {
        isShine = false;
    };
    window.onblur = function() {
        isShine = true;
    };
    // for IE
    document.onfocusin = function() {
        isShine = false;
    };
    document.onfocusout = function() {
        isShine = true;
    };


效果如下图:


20170717092948393.gif

目录
相关文章
|
11月前
|
算法 前端开发
蓝桥杯 —— Web前端(算法类)【标题即题目链接,点击查看具体要求】
蓝桥杯 —— Web前端(算法类)【标题即题目链接,点击查看具体要求】
151 0
|
11月前
|
前端开发 算法
蓝桥杯 —— Web前端(页面布局类【Flex 布局】)【标题即题目链接,点击查看具体要求】
蓝桥杯 —— Web前端(页面布局类【Flex 布局】)【标题即题目链接,点击查看具体要求】
166 0
|
11月前
|
JSON 前端开发 JavaScript
蓝桥杯 —— Web前端(数据交互类)【标题即题目链接,点击查看具体要求】
蓝桥杯 —— Web前端(数据交互类)【标题即题目链接,点击查看具体要求】
125 0
|
11月前
|
自然语言处理 JavaScript 前端开发
蓝桥杯 —— Web前端(功能实现类)【标题即题目链接,点击查看具体要求】
蓝桥杯 —— Web前端(功能实现类)【标题即题目链接,点击查看具体要求】
102 0
|
11月前
|
前端开发 算法
蓝桥杯 —— Web前端(Bug调试类)【标题即题目链接,点击查看具体要求】
蓝桥杯 —— Web前端(Bug调试类)【标题即题目链接,点击查看具体要求】
|
11月前
|
JSON Linux Go
Golang之我想写个"web框架"-7: 完成一个“留言小demo”
Golang之我想写个"web框架"-7: 完成一个“留言小demo”
138 0
|
12月前
|
JavaScript
移动端也能兼容的web页面制作1:MDBootstrap演示Demo运行演示
移动端也能兼容的web页面制作1:MDBootstrap演示Demo运行演示
240 0
|
中间件 新制造 调度
量化合约系统开发(web3.0技术开发)丨合约量化系统开发(demo及源码)
  智能制造则是利用先进的数字化、网络化、智能化技术,建立高度集成化的制造系统,实现远程监测、即时调度、智能决策、智能优化等功能。智能制造提供了更高效、精准、灵活的生产方式,有效地提升了制造业的质量和效率。在智能制造中,人工智能技术被视为实现智能制造的重要支撑,可以扩大智能制造的深度和广度
|
测试技术 iOS开发
Flutter Web网站之最简方式实现暗黑主题无缝切换
Flutter Web网站之最简方式实现暗黑主题无缝切换
273 0
Flutter Web网站之最简方式实现暗黑主题无缝切换
|
消息中间件 网络协议 前端开发
SpringBoot轻松整合WebSocket,实现Web在线聊天室
前面为大家讲述了 Spring Boot的整合Redis、RabbitMQ、Elasticsearch等各种框架组件;随着移动互联网的发展,服务端消息数据推送已经是一个非常重要、非常普遍的基础功能。今天就和大家聊聊在SpringBoot轻松整合WebSocket,实现Web在线聊天室,希望能对大家有所帮助。
SpringBoot轻松整合WebSocket,实现Web在线聊天室