JS 운동 기초 (4) 충돌 운동
28058 단어 js
중력 반전 속 도 를 넣 는 동시에 속도 수직 충돌 을 줄 이 고 가로 속도 도 가로 속도 소수 문제 (마이너스) 를 줄인다.
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title> </title>
6 <style>
7 #div1{ width:100px; height:100px; background:red; position:absolute;}
8 </style>
9 <script>
10
11 // : , , （ ）
12
13 window.onload = function(){
14 var oDiv = document.getElementById('div1');
15
16 var iSpeedX = 10;
17 var iSpeedY = 10;
18
19 startMove();
20
21 function startMove(){
22 setInterval(function(){
23
24 var L = oDiv.offsetLeft + iSpeedX;
25 var T = oDiv.offsetTop + iSpeedY;
26
27 if(T>document.documentElement.clientHeight - oDiv.offsetHeight){
28 T = document.documentElement.clientHeight - oDiv.offsetHeight;
29 iSpeedY *= -1;
30 }
31 else if(T<0){
32 T = 0;
33 iSpeedY *= -1;
34 }
35
36 if(L>document.documentElement.clientWidth - oDiv.offsetWidth){
37 L = document.documentElement.clientWidth - oDiv.offsetWidth;
38 iSpeedX *= -1;
39 }
40 else if(L<0){
41 L = 0;
42 iSpeedX *= -1;
43 }
44
45 oDiv.style.left = L + 'px';
46 oDiv.style.top = T + 'px';
47 },30);
48 }
49
50 };
51 </script>
52 </head>
53
54 <body>
55 <div id="div1"></div>
56 </body>
57 </html>자유 낙하:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title> </title>
6 <style>
7 #div1{ width:100px; height:100px; background:red; position:absolute;}
8 </style>
9 <script>
10 window.onload = function(){
11 var oInput = document.getElementById('input1');
12 var oDiv = document.getElementById('div1');
13
14 var timer = null;
15 var iSpeed = 0;
16
17 oInput.onclick = function(){
18 startMove();
19 };
20
21 function startMove(){
22 clearInterval(timer);
23 timer = setInterval(function(){
24
25 iSpeed += 3;
26
27 var T = oDiv.offsetTop + iSpeed;
28
29 if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
30 T = document.documentElement.clientHeight - oDiv.offsetHeight;
31 iSpeed *= -1;
32
33 iSpeed *= 0.75;
34
35 }
36
37 oDiv.style.top = T + 'px';
38
39 },30);
40 }
41
42 };
43 </script>
44 </head>
45
46 <body>
47 <input type="button" value=" " id="input1">
48 <div id="div1"></div>
49 </body>
50 </html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
