本文实例讲述了Javascript实现网络监测的方法。分享给大家供大家参考。具体实现方法如下:

该代码可监测网络是否连接及网速的快慢状态。

(function(){
var network = function(){
 var monitor = this;
 /**
  * @param {Funcation} speedInterval
  */
 var speedInterval = null;
 /**
  * @param {Function} networkInterval
  */
 var networkInterval = null;
 /**
  * @param {Function} reNetworkInterval
  */
 var reNetworkInterval = null;
 var time = 5000;
 /**
  * 获取网络连接状态
  */
 var getConnectState = function(){
  return navigator.onLine "网速中断");
  window.clearInterval(reNetworkInterval);
  reNetworkInterval = null;
  endSpeed();
  endNetwork();
  window.setTimeout(function(){
   reNetworkInterval = window.setInterval(function(){
    if (getConnectState() == 1) {
     window.clearInterval(reNetworkInterval);
     reNetworkInterval = null;
     startSpeed();
     startNetwork();
    } else {
     window.clearInterval(reNetworkInterval);
     reNetworkInterval = null;
     disconnect();
    }
   }, time);
  }, 2 * time);
 };
 /**
  * 网络速度
  */
 var speed = {
   /**
    * 网速过慢
    */
   bad : function(){
    // TODO ... 
    console.log("网速过慢");
    window.setTimeout(function(){
     if(getConnectState() == 1) {
      window.clearInterval(networkInterval);
      networkInterval = null;
      startSpeed();
     } else {
      disconnect();
     }
    }, 2 * time);
   },
   /**
    * 网速中等
    */
   medium : function(){
    // TODO ... 
    console.log("网速中等");
   },
   /**
    * 网速极佳
    */
   great : function(){
    // TODO ... 
    console.log("网速极佳");
   }
 };
 /**
  * 开启速度监测
  * @private
  */
 var startSpeed = function(){
  window.clearInterval(speedInterval);
  speedInterval = null;
  if(getConnectState() == 1) {
   speedInterval = window.setInterval(function(){
    var start = new Date().getTime();
    if (getConnectState() == 1) {
     var img = document.getElementById("networkSpeedImage");
     if (!!!img) {
      img = document.createElement("IMG");
      img.id = "networkSpeedImage";
      img.style.display = "none";
      document.body.appendChild(img);
     }
     try {
      img.src = "http://www.baidu.com/img/baidu_jgylogo3.gif" + new Date().getTime();
      img.onload = function(){
       var end = new Date().getTime();
       var delta = end - start;
       if (delta > 200) {
        speed.bad();
       } else if (delta > 100) {
        speed.medium();
       } else {
        speed.great();
       }
      };
     } catch(e){
      speed.bad();
     }
    } else {
     // TODO 网络断开
     disconnect();
    }
   }, time);
  }else {
   // TODO 网络断开
   disconnect();
  }
 };
 /**
  * 停止速度监测
  * @private
  */
 var endSpeed = function(){
  window.clearInterval(speedInterval);
  speedInterval = null;
 };
 /**
  * 开启网络连接监测
  * @private
  */
 var startNetwork = function(){
  if (getConnectState() == 1) {
   networkInterval = window.setInterval(function(){
    if (getConnectState() == 0) {
     disconnect();
    }
   }, time);
  } else{
   disconnect();
  }
 };
 /**
  * 结束网络连接监测
  * @private 
  */
 var endNetwork = function(){
  window.clearInterval(networkInterval);
  networkInterval = null;
 };
 /**
  * 网络监控开始
  */
 this.start = function(){
  startNetwork();
  startSpeed();
 };
 /**
  * 停止网络监控
  */
 this.stop = function(){
  endSpeed();
  endNetwork();
 };
};
  window.network = new network();
}).call(this);
// 调用的时候,直接调用network.start();

希望本文所述对大家的javascript程序设计有所帮助。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。