Po 方法是在定时器 setInterval 下抛行的一个动作，每次执行时都会根据配置偏移量以及自由落体及上抛相关公式计算当前参数值变化，并设定当前物体的位置；
obj.style.left = (this.left)+'px'; 初始化当前步骤的 左偏移;
落体状态if (!this.isup) {...} 表示是否是落体状态;
if (this.t == 0) { this.top = obj.offsetTop; this.h = 570 - 22 - this.top; this.mt = Math.sqrt(2*this.h/(this.g*100)); //alert(mt+' '+isup+' '+t) }
当时间为 0 时，表示当前处于落体的最顶点，记录当前距顶部的偏移值，设定落体的高度，以及计算此高度落体所用的时间；
if (this.t >= this.mt) { this.t = this.mt; this.rh = (1/2)*this.g*this.t*this.t*100; this.s = this.g*this.t*100; obj.style.top = (this.rh+this.top)+'px'; //t = 0; this.s = this.s-50>0 ? this.s-50 : 0; this.isup = true; this.t = 0; }
当落体所用时间，大于 this.mt 的最大时间时，将时间设置为 this.mt 的落体总时间；
this.rh 根据公式 1/2gt2 得出的位移值，会等于 this.h 的值，或接近于 this.h 的高度值;
this.s 根据 速度在加速度随时间变化的公式计算出 当前的速度，也即最大带度，这也是初始的上抛速度；
this.s = this.s-50>0 ? this.s-50 : 0;
这个 50 即为阻尼系数，即每次上抛所受阻力所减的速度值；
this.isup 设置 true; 表示进入上抛状态；
obj.style.top = (this.rh+this.top)+'px'; 设置物体本步骤落体的当前位置；
上抛运行if (this.t == 0) { this.h = this.s*this.s/(2*this.g*100); this.mt = this.s/(this.g*100); this.top = obj.offsetTop; //alert(mt+' '+isup+' '+t) }
当时间为 0 时，表示处于上抛开始点，计算 按落体后的速度及公式: v2/(2g) 上升的最大高度 this.h; 最大上升时间 this.mt; 保存当前距顶部的偏移 this.top;
if (this.t>=this.mt) { this.t = this.mt; this.rh = this.s*this.t - (1/2)*this.g*this.t*this.t*100; obj.style.top = (this.top - this.rh)+'px'; this.s = 0; this.isup = false; this.t = 0; }
当时间 this.t 大于 this.mt 这个最大上抛时间时，将时间设置为 this.mt;
this.rh 表示上抛的高度; 公式: vt - (1/2)gt2 ;
重置 this.t及this.s 时间与速度，并将 this.isup 置为 false，开始落体动作；
LuoRun.prototype.Go = function(obj) { var self = this; if (obj == null) obj = $('box'); self.timer = setInterval(function() { self.Po(obj); if (self.h<=0) { clearInterval(self.timer); self.id.parentNode.removeChild(self.id); } },10); }
Go 是个定时器，10 毫秒执行一次物体偏移移动操作；
当 this.h 小于等于 0 时，清除物体，该对象方块一个落体与上抛过程结束；
document.onmousedown = function(e) { e = e?e:window.event; var crtDiv = document.createElement('div'); crtDiv.style.position = 'absolute'; crtDiv.style.left = e.clientX + 'px'; crtDiv.style.top = e.clientY + 'px'; crtDiv.style.background = '#333'; crtDiv.style.width = '22px'; crtDiv.style.height = '22px'; document.body.appendChild(crtDiv); crtDiv.innerHTML = ' '; var C = new LuoRun(); C.left = e.clientX; C.id = crtDiv; document.onmouseup = function() { document.onmousemove = null; window.setTimeout(function() { C.Go(crtDiv); },1000); } }
当鼠标点击页面时，就创建一个灰黑底，宽高 22 像素的方块；
并初始化 (创建新对象) LuoRun 类；
当鼠标松开后，过一秒钟执行 LuoRun的 Go 定时器，开始表现物体的落体与上抛过程；
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》