<!doctype html>

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<title>html5 js 监听网络在线与离线</title>

</head>

<body>

<div id="status" style="font-size:100px;"></div>

</body>

</html>

<script type="text/javascript" language="javascript" charset="utf-8">

    $$ = function(id){return document.getElementById(id);};

    if(navigator.onLine){

        $$("status").innerHTML="第一次加载时在线";

    } else{

        $$("status").innerHTML="第一次加载时离线";

    }

    window.addEventListener("online", online, false);

    function online(){

        $$("status").innerHTML="on";

    }

    window.addEventListener("offline", offline, false);

    function offline(){

        $$("status").innerHTML="off";

    }

</script>
<!doctype html>

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<title>html5 js 监听网络在线与离线</title>

<style type="text/css">

#status {

  position : fixed;

  width: %;

  font : bold 1em sans-serif;

  color: #FFF:

  padding : .5em

}

#log {

  padding: .5em .5em .5em;

  font: 1em sans-serif;

}

.online {

  background: green;

}

.offline {

  background: red;

}

</style>

</head>

<body>

<div id="status" style="font-size:100px;">

<div id="status"></div>

<div id="log"></div>

<p>This is a test</p>

</div>

</body>

</html>

<script type="text/javascript" language="javascript" charset="utf-8">

    window.addEventListener('load', function() {

        var status = document.getElementById("status");

        function updateOnlineStatus(event) {

            var condition = navigator.onLine ? "online" : "offline";

            //alert(condition);

            status.className = condition;

            status.innerHTML = condition.toUpperCase();

            log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);

        }

        window.addEventListener('online',  updateOnlineStatus);

        window.addEventListener('offline', updateOnlineStatus);

        //alert(navigator.onLine);

        //updateOnlineStatus();

    });

</script>

html5 js 监听网络在线与离线的更多相关文章

  1. HTML5判断设备在线离线及监听网络状态变化例子

    经测试android ipad默认的浏览器支持,用appcan封装的网页也支持 本文原创,转载请说明出处 <!doctype html> <html> <head> ...

  2. HTML5外包团队——技术分享：HTML5判断设备在线离线及监听网络状态变化例子

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  3. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  4. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  5. IOS-网络（监听网络状态）

    // // BWNetWorkTool.h // IOS_0131_检测网络状态 // // Created by ma c on 16/1/31. // Copyright © 2016年 博文科技 ...

  6. ionic app 监听网络功能

    安装cordova插件: cordova plugin add cordova-plugin-network-information 在app.js 的run()里面的function()注入$cor ...

  7. 通过BroadCast与service时时监听网络变化

    首先需要一个service: 这里我定义了一个NetworkStateService,在这个service中我写了一个BroadcastReceiver用于监听网络状态发生改变的情况并在这个servi ...

  8. android动态注册监听网络变化异常

    在使用广播接收器监听网络变化的时候,在AndroidManifest.xml中加入<user-permission android:name="android.permission.A ...

  9. IOS-利用AFNetworking监听网络状态

    网络环境检测:检测用户当前所处的网络状态 效果图 1.当蜂窝和wifi同时关闭时候  显示为不可达(AFNetworkReachabilityStatusNotReachable)状态 2.打开蜂窝移 ...

随机推荐

  1. 笔记50 Mybatis快速入门（一）

    一.Mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis ...

  2. <el-table>序号逐次增加，翻页时继续累加，解决翻页时从编号1开始的情况

    注释: scope.$index     当前序号 cuePage 表示当前页码 pageSize   表示每页显示的条数

  3. python基础小点

    变量的命名规则 由字母.下划线.数字组成,且不能以数字开头 不能用关键字作为变量名 最好不要与python内置的一些方法和类名冲突 变量名应尽量简短且具有意义,多个单词之间用下划线连接 注释 #  - ...

  4. Dubbo执行流程？

    Dubbo执行流程? 0 start: 启动Spring容器时,自动启动Dubbo的Provider 1.register: Dubbo的Provider在启动后自动会去注册中心注册内容.注册的内容包 ...

  5. centos8 安装vmware需要的内核头文件 kernel-headers.

    centos8 安装vmware需要的内核头文件 kernel-headers. uname -r (查看内核版本) rpm -qa kernel-headers (查看kernel-headers版 ...

  6. vuex之module

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module) ...

  7. JavaWeb学习篇之----EL表达式详解

    我们之前的几篇文章中都提到了一个EL表达式,那么这个EL表达式到底是什么东东呢?为什么用处那么大,下面我们就来看看EL表达式的相关内容 EL表达式简介: EL 全名为Expression Langua ...

  8. TopCoder[SRM587 DIV 1]:ThreeColorability(900)

    Problem Statement      There is a H times W rectangle divided into unit cells. The rows of cells are ...

  9. css清除浮动的几种方法

    推荐几种好用的清除浮动方法: 方法1: .clearfix:after { content:"."; display:block; height:; clear:both; vis ...

  10. NX二次开发-UFUN获取工程图详细信息UF_DRAW_ask_drawing_info

    NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_part.h> UF_initialize ...