html5 js 监听网络在线与离线
<!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 监听网络在线与离线的更多相关文章
- HTML5判断设备在线离线及监听网络状态变化例子
经测试android ipad默认的浏览器支持,用appcan封装的网页也支持 本文原创,转载请说明出处 <!doctype html> <html> <head> ...
- HTML5外包团队——技术分享:HTML5判断设备在线离线及监听网络状态变化例子
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- IOS-网络(监听网络状态)
// // BWNetWorkTool.h // IOS_0131_检测网络状态 // // Created by ma c on 16/1/31. // Copyright © 2016年 博文科技 ...
- ionic app 监听网络功能
安装cordova插件: cordova plugin add cordova-plugin-network-information 在app.js 的run()里面的function()注入$cor ...
- 通过BroadCast与service时时监听网络变化
首先需要一个service: 这里我定义了一个NetworkStateService,在这个service中我写了一个BroadcastReceiver用于监听网络状态发生改变的情况并在这个servi ...
- android动态注册监听网络变化异常
在使用广播接收器监听网络变化的时候,在AndroidManifest.xml中加入<user-permission android:name="android.permission.A ...
- IOS-利用AFNetworking监听网络状态
网络环境检测:检测用户当前所处的网络状态 效果图 1.当蜂窝和wifi同时关闭时候 显示为不可达(AFNetworkReachabilityStatusNotReachable)状态 2.打开蜂窝移 ...
随机推荐
- ttytype - 终端设备映射的默认终端类型
DESCRIPTION(描述) /etc/ttytype 文件把termcap/terminfo中的终端类型名与tty行关联起来.每行包括一种终端类型,后面跟着空格,然后是tty名(不带 /dev/ ...
- [LOJ#2732] 「JOISC 2016 Day 2」雇佣计划
参考博文 (不过个人感觉我讲的稍微更清楚一点) 题目就是让我们求图中满足数值大于等于B的连通块数量 然后我们可以尝试转换为求连通块两端所产生的“谷”的数量,显然一个连通块对谷可以贡献2的答案,最终答案 ...
- 【模板篇】Link Cut Tree模板(指针)
网上一片一片的LCT都是数组写的 orz 用指针写splay的人想用指针写LCT找板子都不好找QAQ 所以能A题了之后自然要来回报社会, 把自己的板子丢上来(然而根本没有人会看) LCT讲解就省省吧, ...
- vue之父子组件执行对方的方法
一.子组件执行父组件中的方法 1.父组件将方法名传给子组件,子组件进行调用 父组件中: <Vbutton typeBtn="success" :btnUserMethod=& ...
- 浏览器http跳转至https问题
Chrome 浏览器 地址栏中输入 chrome://net-internals/#hsts 在 Delete domain security policies 中输入项目的域名,并 Delete 删 ...
- 关于synchronized和Lock
原文链接:关于volatile关键字解析,synchronized和Lock参考 深入浅出,解释的非常清楚,有条理~~~ 以下为转载内容: Java并发编程:volatile关键字解析 volatil ...
- Jmeter-【JSON Extractor】-响应结果中三级key取值
一.请求返回样式 二.取第三个option 三.查看结果
- JUC 一 ReentrantLock 可重入锁
java.util.concurrent.locks ReentrantLock即可重入锁,实现了Lock和Serializable接口 ReentrantLock和synchronized都是可重入 ...
- thinkphp 原生分页
paginate() 是有三个参数: 第一个参数是 $listRows [int],也就是当前的页数 第二个参数是 $simple [boolean], 是否简洁模式或者总记录数 第三个参数是 $co ...
- NX二次开发-获取切换按钮的当前状态UF_MB_ask_toggle_state
NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...