자 바스 크 립 트 자유 낙하 와 상투 운동 원리 와 실현 방법 에 대한 상세 한 설명
11238 단어 Javascript모색 하 다자유 낙하투하 운동
자 바스 크 립 트 코드
//****************************************
// ：Javascript !
// ：Gloot
// ：[email protected]
// 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);
}
}
<style type="text/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;}
</style>
<body>
<form id="form1">
<div class="css1">
：Javascript !<br />
：Gloot<br />
：[email protected] <br />
QQ：345268267 <br />
：http://www.cnblogs.com/editor/ <br />
：
</div>
<div id="line" class="css2"> </div>
</form>
</body>
function JsFunc() {
this.a = "";
this.b = "";
}
JsFunc.prototype.method = function() {
var me = this;
me.a = "method";
}
function init() {
var func = new JsFunc();
func.method();
}
var func = new JsFunc();
this.a,this.b 는 클래스 의 구성원 에 해당 합 니 다.
JsFunc.prototype.method이 종류의 다음 방법 함 수 를 만 드 는 것 과 같다.만약 에 이 JsFunc 가 new 작업 을 여러 번 하면 그 다음 this 멤버 들 은 각자 의 운행 작업 에 영향 을 주지 않 습 니 다.
따라서 JSFunc new 후 새 대상 을 만 들 때 이 대상 의 구성원 이나 방법 에 대해 setTimeout,setInterval 작업 을 하면 병렬 작업 과 유사 한 효과 가 발생 합 니 다.
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;
}
this.h 는 설 정 된 높이 나 물체 에 던 지 는 최고 높이 를 나타 낸다.
this.isup 은 상승 상태 인지 하강 상태 인지 표시 합 니 다.
this.rn 은 현재 꼭대기 에서 떨 어 지 는 위 치 를 표시 하거나 위 에서 던 지 는 거리 초기 속도 위치의 위 치 를 표시 합 니 다.
this.t 떨 어 지 거나 던 지 는 시간;
this.mt 는 특정한 높이 에서 특정한 낮은 점 으로 떨 어 지 는 데 걸 리 는 시간 이나 특정한 초기 속도 로 0 속도 로 던 지 는 데 걸 리 는 시간 을 나타 낸다.
this.timer 표시 타이머
this.top,this.left 는 물체 가 용기 상단 과 왼쪽 의 현재 오프셋 에 비해
this.id 는 현재 사각형 을 만 드 는 대상 id 값 을 표시 합 니 다.
LuoRun.prototype.Po = function(obj) {
}
this.left += 0.3; 물체 가 떨 어 지 거나 왼쪽으로 뛰 는 오프셋(픽 셀)을 나타 낸다.
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)
}
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.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)
}
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.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);
}
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);
}
}
LuoRun 클래스 를 초기 화(새 대상 생 성)합 니 다.
마우스 가 풀 리 면 1 초 후에 LuoRun 의 Go 타 이 머 를 실행 하고 물체 의 낙하 와 위 에 던 지 는 과정 을 표현 합 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 살 펴 볼 수 있다.,,,,,,,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript에서 Math.max와 Math.max.apply의 차이점과 용법 상세 설명최근에 작은 사례를 만들 때 Math를 만났어요.max.apply라는 용법은 이전에 보기 드물게 재미있게 느껴졌으니 기록해 보세요. 1Math.max 문법:Math.max(n1,n2,n3,...,nX)반환값:max(...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
