Javascript如何实现摸拟自由落体与上抛运动的原理与方法

本篇内容主要讲解“Javascript如何实现摸拟自由落体与上抛运动的原理与方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Javascript如何实现摸拟自由落体与上抛运动的原理与方法”吧!

创新互联"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！创新互联具备承接各种类型的网站建设、成都网站建设项目的能力。经过10余年的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。

Java的特点有哪些

Java的特点有哪些 1.Java语言作为静态面向对象编程语言的代表，实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。 2.Java具有简单性、面向对象、分布式、安全性、平台独立与可移植性、动态性等特点。 3.使用Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。

JavaScript 代码

//****************************************
    //名称：Javascript摸拟自由落体与上抛运动!
    //作者：Gloot
    //邮箱：glootz@gmail.com
    // QQ：345268267
    //网站：http://www.cnblogs.com/editor/
    //操作：在页面不同地方点几下
    //***************************************
    var $ = function(el) { return document.getElementById(el); };
    function LuoRun()
    {
      this.h = 0;
      this.s = 0;
      this.g = 9.8;
      this.isup = false;
      this.rh = 0;
      this.t = 0;
      this.timer = null;
      this.mt = 0;
      this.top = 0;
      this.left = 0;
      this.id = null;
    }

    LuoRun.prototype.Po = function(obj) {
      this.left += 0.3;
      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)
        }

        this.t+=0.01;

        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;
        }
        else
        {
          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';
        }
      } else { //up
        //return;

        if (this.s == 0) {
          clearInterval(this.timer);
          this.id.parentNode.removeChild(this.id);
          return;
        }

        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)
        }

        this.t+=0.01;
        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;
        }else {
          this.rh = this.s*this.t - (1/2)*this.g*this.t*this.t*100;

          obj.style.top = (this.top - this.rh)+'px';
        }
      }
    }

    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);
    }

    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);
      }
    }

Css 样式

    td,body {font-size:12px;}
    .css1 {width:240px;display:table;position:absolute;left:20px;top:20px;border:1px solid green;background:#CAF4BD;line-height:18px;padding:3px;}
    .css2 {width:900px;height:22px;border-top:1px solid #333;position:absolute;top:570px;left:60px;}

Body Html代码

  

  
    名称：Javascript摸拟自由落体与上抛运动!
    作者：Gloot
    邮箱：glootz@gmail.com 
     QQ：345268267 
    网站：http://www.cnblogs.com/editor/ 
    操作：在页面不同地方点几下