<!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. 基于nginx+tomcat部署商城系统并连接数据库

    需三台服务器nginx 192.168.200.111tomcat 192.168.200.112tomcat 192.168.200.113 192.168.200.111[root@localho ...

  2. tomcat 启用https协议

    利用tomcat服务器配置https双向认证. 1.为服务器生成证书 打开cmd,进入jdk的bin目录下,输入下面的命令: keytool -genkey -v -alias tomcat -key ...

  3. day03 mysql外键 表的三种关系 单表查询 navicat

    day03 mysql navicat   一.完整性约束之     外键 foreign key     一个表(关联表: 是从表)设置了外键字段的值, 对应的是另一个表的一条记录(被关联表: 是主 ...

  4. LUOGU P4560 [IOI2014]Wall 砖墙 (线段树)

    传送门 解题思路 线段树打标记,刚开始想复杂了,维护了四个标记.后来才知道只需要维护一个最大值最小值即可,然后更新的时候分类讨论一下. 代码 #include<iostream> #inc ...

  5. VS卸载不干净,再次安装盘符不能更改问题(转载)

    下载文件,直接用. 链接:https://pan.baidu.com/s/1K1cbJUq_JC9DN2MoE6Z3RA 密码:cuad

  6. MFC-CString与int互相转化

    1. CString转int ; CString str = _T("123"); n = _ttoi(str); 2. int转CString ; CString str; st ...

  7. ionic-Javascript:ionic 上拉菜单(ActionSheet)

    ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet) ...

  8. super 关键字的使用及说明

    super 关键字主要用于访问父类的变量和方法. 代码示例: public class Student { String name; public Student(){ System.out.prin ...

  9. python中的线程锁

    锁对象 原始锁是一个在锁定时不属于特定线程的同步基元组件.在Python中,它是能用的最低级的同步基元组件,由 _thread 扩展模块直接实现. 原始锁处于 "锁定" 或者 &q ...

  10. C++之运算符_算数运算符

    运算符 **作用:**用于执行代码的运算 | **运算符类型** | **作用** || -------------- | -------------------------------------- ...