javascript模拟的Ping效果代码 （Web Ping）

当然,在请求时无法统计HTTP头部的长度,所以当请求数据包长度在最大传输单元临界点时,额外的HTTP头可以导致IP分组,因此存在一定的误差.(2009/6/21)

在线演示：http://demo.jb51.net/js/2011/ping/

核心代码：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTTP Ping</title>
<style>
html
{
height: 100%;
overflow: hidden;
}
body
{
background: #000;
color: #C0C0C0;
font-weight: bold;
font-size: 14px;
font-family: Lucida Console;
height: 100%;
margin: 0 0 0 5px;
}
#divContent
{
height: 90%;
overflow: auto;
}
#txtTimeout
{
width: 40px;
}
button
{
margin-left: 10px;
}
</style>
</head>
<body>
<div id="divInput">
<span>URL:</span>
<input id="txtURL" type="text" />
<span>Timeout:</span>
<input id="txtTimeout" type="text" value="2000" />
<input id="btnSwitch" type="button" value="Start" onclick="handleBtnClick()" />
<hr/>
</div>
<div id="divContent"></div>
<script>
var intStartTime;
var objIMG = new Image();
objIMG.onload =
objIMG.onerror =
function()
{
/*
* 有回应,取消超时计时
*/
clearTimeout(intTimerID);
if(!bolIsRunning || bolIsTimeout)
return;
var delay = new Date() - intStartTime;
println("Reply from " +
strURL +
" time" +
((delay<1)?("<1"):("="+delay)) +
"ms");
arrDelays.push(delay);
/*
* 每次请求间隔限制在1秒以上
*/
setTimeout(ping, delay<1000?(1000-delay):1000);
}
function ping()
{
/*
* 发送请求
*/
intStartTime = +new Date();
intSent++;
objIMG.src = strURL + "/" + intStartTime;
bolIsTimeout = false;
/*
* 超时计时
*/
intTimerID = setTimeout(timeout, intTimeout);
}
function timeout()
{
if(!bolIsRunning)
return;
bolIsTimeout = true;
objIMG.src = "X:\\";
println("Request timed out.");
ping();
}
</script>
<script>
var $ = function(v){return document.getElementById(v)};
var arrDelays = [];
var intSent;
var bolIsRunning = false;
var bolIsTimeout;
var strURL;
var intTimeout;
var intTimerID;
var objBtn = $("btnSwitch");
var objContent = $("divContent");
var objTxtURL = $("txtURL");
objTxtURL.value = window.location.host;
function handleBtnClick()
{
if(bolIsRunning)
{
/*
* 停止
*/
var intRecv = arrDelays.length;
var intLost = intSent-intRecv;
var sum = 0;
for(var i=0; i<intRecv; i++)
sum += arrDelays[i];
objBtn.value = "Start";
bolIsRunning = false;
/*
* 统计结果
*/
println("　");
println("Ping statistics for " + strURL + ":");
println("　　Packets: Sent = " +
intSent +
", Received = " +
intRecv +
", Lost = " +
intLost +
" (" +
Math.floor(intLost / intSent * 100) +
"% loss),");
if(intRecv == 0)
return;
println("Approximate round trip times in milli-seconds:");
println("　　Minimum = " +
Math.min.apply(this, arrDelays) +
"ms, Maximum = " +
Math.max.apply(this, arrDelays) +
"ms, Average = " +
Math.floor(sum/intRecv) +
"ms");
}
else
{
/*
* 开始
*/
strURL = objTxtURL.value;
if(strURL.length == 0)
return;
if(strURL.substring(0,7).toLowerCase() != "http://")
strURL = "http://" + strURL;
intTimeout = parseInt($("txtTimeout").value, 10);
if(isNaN(intTimeout))
intTimeout = 2000;
if(intTimeout < 1000)
intTimeout = 1000;
objBtn.value = "Stop ";
bolIsRunning = true;
arrDelays = [];
intSent = 0;
cls();
println("Pinging " + strURL + ":");
println("　");
ping();
}
}
function println(str)
{
var objDIV = document.createElement("div");
if(objDIV.innerText != null)
objDIV.innerText = str;
else
objDIV.textContent = str;
objContent.appendChild(objDIV);
objContent.scrollTop = objContent.scrollHeight;
}
function cls()
{
objContent.innerHTML = "";
}
</script>
</body>
</html>

赞 (0)

相关推荐

  • javascript模拟select,jselect的方法实现

    由于主流浏览器对select元素渲染不同,所以在每种浏览器下显示也不一样,最主要的是默认情况下UI太粗糙,即使通过css加以美化也不能达到很美观的效果.这对于我们这些专注于UX的前端开发人员是无法容忍的.于是在项目不太忙的时候,就计划写一个模拟的select控件出来.接下来就把实现的细节.遇到的问题以及如何使用和大家分享一下. 1. 实现细节 init: function(context) { //获取指定上下文所有select元素 var elems = squid.getElementsBy

  • Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

    前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20

  • javascript jscroll模拟html元素滚动条

    javascript jscroll模拟html元素滚动条

    主流浏览器默认为html元素提供的滚动条不美观,而且前端开发人员想对其通过css进行统一样式的美化也是不可实现的.比如ie可以通过样式来实现简单的美化.Webkit内核浏览器可以控制滚动条的显示效果,firefox则不允许用户为滚动条定义样式.但是对于追求友好的用户体验的前端开发人员,是不会被这些浏览器的不一致行为所阻止的.我们可以自己通过标准的html元素模拟来实现自定义的滚动条. 这里是自己在工作不太忙的时候写出来了一个用户可以自定义的滚动条jscroll,以下简称jscroll.jscro

  • JavaScript 模拟用户单击事件

    JavaScript 模拟用户单击事件

    一开始,我想到了用jQuery的click()事件来触发超链接的单击事件(与trigger("click")一样的效果).结果发现不如人意. 实例如下: 效果图 IE: FireFox:   复制代码 代码如下: <h3>请单击"Click Me".测试提交按钮与超链接是否也被单击了.</h3>     <button id="btn">Click Me</button>     <form

  • Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox

    一把情况下模拟点击一般两个方面,模拟点击超级连接事件firefox的兼容的函数为对HTMLAnchorElement 加入onclick事件 复制代码 代码如下: try { // create a element so that HTMLAnchorElement is accessible document.createElement('a'); HTMLElement.prototype.click = function () { if (typeof this.onclick == 'f

  • javascript 模拟坦克大战游戏(html5版)附源码下载

    javascript 模拟坦克大战游戏(html5版)附源码下载

    一.总结关键点和遇到的问题 1.javascript中的继承,最好父类只提供方法共享,属性写到各自子类中,避免父类和子类的构造函数混杂. 2.prototype模拟继承的代码,应写在所有方法定义之前,否则原型对象被改变,方法就变成了未定义,如: 复制代码 代码如下: Hero.prototype = new Tank (0, 0, 0); Hero.prototype.constructor = Hero; Hero.prototype.addLife = function(){ this.li

  • javascript模拟滚动条实现代码

    javascript模拟滚动条实现代码

    其实这样代码产生些了冗余.......不如单独写个Slider类 做为第一个版本还是保存起来 有时间的话 试着单独的写个Slider类 #container { height:200px;_height:198px;width:385px;border:1px solid #CCCCCC; } #container #content{ height:200px;width:370px;float:left;overflow:hidden; } #container #content div{ m

  • JavaScript实现Flash炫光波动特效

    看到flash的实现这类的动画非常的便捷,于是试图胡搞一下.全部是用dom模拟的像素点,锯齿是难免的-- 这个要避免锯齿恐怕要再加一次滤镜了吧,或者用图片. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

  • JS模拟实现Select效果代码

    JS模拟实现Select效果代码

    本文实例讲述了JS模拟实现Select效果代码.分享给大家供大家参考.具体如下: 这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-select-style-demo-codes/ 具体代码如下: <!DOCT

  • js模拟弹出效果代码修正版

    模拟弹出效果代码修正版 从网上看到的代码,当文章内容较多时,总会提示 复制代码 代码如下: --------------------------- Windows Internet Explorer --------------------------- Internet Explorer 无法打开 Internet 站点 应该是页面没加载完,所以我判断下,等页面加载完了,再运行 复制代码 代码如下: window.onload=function(){ var oo = new fw.com.u

  • javascript模拟的Ping效果代码 （Web Ping）

    当然,在请求时无法统计HTTP头部的长度,所以当请求数据包长度在最大传输单元临界点时,额外的HTTP头可以导致IP分组,因此存在一定的误差.(2009/6/21) 在线演示:http://demo.jb51.net/js/2011/ping/ 核心代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

  • JS模拟简易滚动条效果代码(附demo源码)

    JS模拟简易滚动条效果代码(附demo源码)

    本文实例讲述了JS模拟简易滚动条效果的方法.分享给大家供大家参考,具体如下: 使用Js模拟滚动条.简易模式,类似手机上常见的滚动条. 效果如下: Js代码如下: var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array(); // obj需要添加滚动条的对象 w滚动条宽度 className滚动条样式名称 // obj元素 必须指定高度,并设置overflow:hidden; //

  • JavaScript模拟下拉菜单代码

    优点:点击body区域同样可以隐藏下拉菜单,且不会和body已有的onclick事件冲突. 缺点:请大家指出,虚心接受!运行框代码看似繁多,实属无奈,请下载附件,以便更好观察或修改~! 下拉菜单 body{margin:20px auto;font-family:Arial, Helvetica, sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa; position:relative;padding:

  • Javascript模拟加速运动与减速运动代码分享

    加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外一个元素的距离,如xxx.style.left或xxx.style.marginLeft,然后每次运动后都使速度增加,这样加速运动的效果就出现了,减速运动是同样的道理. 下面是两个示例: 加速运动 复制代码 代码如下: <!DOCTYPE html> <html> <head&g

  • JavaScript 放大镜 移动镜片效果代码

    放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 JavaScript 放大镜系列的文章, 每次讲一个点, 由点及面, 最后完成整个效果. 本次我们先了解如何在缩略图上移动镜片. (这是 DEMO) 缩略图和镜片组成的 DOM 结构如下. 复制代码 代码如下: <a id="thumb" href="#"> <img src="http://img.alibaba

  • js模拟3D场景效果代码打包

    要在二维空间模拟出三维的效果,就需要把三维的坐标转换成二维坐标.一个最基本依据是:东西越远,看到大小就越小,坐标越往消失点靠拢. 透视公式: scale = fl / (fl + z); scale是大小的比例值,0.0到1.0之间,fl是观察点到成像面的距离,通常这个值是固定,z就是物件的三维空间中的z轴. 在写这些代码之前,我喜欢用面向对象来描述我写的这些东西,比如我需要一个场景,场景是个空间,空间内是可以容纳各种物件的,物件是个对象,物件是是x,y,z三个维度的,场景可以插入任意多的物件,

  • javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)

    实例代码一见: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #main div{position:absolute;width:220px;height:150px;border:1px solid #999;} </style> <script type="text/javascript"> var a; d

  • Javascript模拟scroll滚动效果脚本第1/2页

    Insert title here var oEventUtil = new Object(); oEventUtil.addEventHandler = function (oTarget,sType,fnDo){ if(oTarget.addEventListener){ oTarget.addEventListener(sType,fnDo,false) } if(oTarget.attachEvent){ oTarget.attachEvent("on"+sType,fnDo)

随机推荐