JavaScript在线状态检测API

在线状态检测API用于检测当前的网络是否正常，包括是否在线以及在线状态改变事件。

一、当前在线状态属性

navigator.onLine用于检测当前的网络状态，为布尔型，用户网络连通则值为ture，否则值为false

二、状态改变事件

为window绑定online及offline事件可以监听网络连通性的改变：

window.addEventListener('online', function(){alert('网络已连接')},false);
window.addEventListener('offline', function(){alert('网络已断开')},false);

注意：IE8中需要给document.body绑定事件而不是window
此处网络连通性的变化指的是物理上的连通性变化，如果是在控制台将网络限制为offline则不会触发相应的事件。

三、兼容性

IE：8+
Chrome：14+
Firefox：3.5+（4-40存在bug，只有在offline模式下才会显示正确，否则onLine的值一直是true）
Safari：5+

ol自定义序号样式的方法

ol为有序列表元素，它的默认样式在前面会自动添加序号如1.、2.、3.等，本文介绍如何通过css及html5新增属性改变需要的样式以及编号规则等。

一、编号倒序（HTML5新增）
reversed属性可以指定编号为倒序：

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

二、指定编号起始值（HTML5新增）
start属性可以指定编号的初始值：

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

三、指定编号位置（内、外）
css属性list-style-position:inside;可以指定编号的位置，下面的列表的编号为inside（默认为outside），可以与上面两个例子对比一下，对齐方式有所不同。

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

四、自定义编号的值

<style>
ol.example{counter-reset: num;}
ol.example li{counter-increment: num; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>

五、自定义编号增量

<style>
ol.example{counter-reset: num;}
ol.example li{counter-increment: num 2; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>

六、自定义编号初始值
下面的例子中example的第一个li为12，后面依次是14、16、18，counter-reset和counter-increment两个属性的第二个值也可以为负值

counter-reset属性第二个值的默认值为0，表示初始值为0；counter-increment属性第二个值的默认值为1，表示增量为1。

<style>
ol.example{counter-reset: num 10;}
ol.example li{counter-increment: num 2; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>