JavaScript 향상 튜토리얼 - DOM 프로그래밍(div 이동을 제어하는 두 가지 방법)-JS 튜토리얼-php.cn

JavaScript 향상 튜토리얼 - DOM 프로그래밍(div 이동을 제어하는 두 가지 방법)

黄舟

풀어 주다： 2017-01-21 16:21:11

원래의

1282명이 탐색했습니다.

첫 번째 유형의 버튼 컨트롤
먼저 두 개의 html 버튼과 div를 만들고 div에 스타일을 지정합니다

input type="button" value="左" id="1">
<input type="button" value="右" id="2">
<div id="3">
div {
            width: 100px;
            height: 100px;
            background-color: bisque;
            position: absolute;
            left: 100px;
            top: 100px;
        }

로그인 후 복사

그런 다음 스크립트에서 div와 두 개의 버튼을 가져옵니다

var left = document.getElementById("2");
    var right = document.getElementById("1");
    var div = document.getElementById("3");

로그인 후 복사

그런 다음 onclick 함수를 추가합니다.

left.onclick = function () {
           
    }
    right.onclick = function () {
      
    }

로그인 후 복사

div

var x = 100;

로그인 후 복사

의 왼쪽 변경을 제어하는 변수를 설정합니다.버튼을 클릭할 때 트리거됩니다.

left.onclick = function () {
            x=x+10;
            div.style.left = x+"px";
    }
    right.onclick = function () {
        x=x-10;
        div.style.left = x+"px";
    }

로그인 후 복사

소스 code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div {             width: 100px;             height: 100px;             background-color: bisque;      
              position: absolute;             left: 100px;             top: 100px;         }
    </style>
</head>
<body>
<input type="button" value="左" id="1"> <input type="button" value="右" id="2"> <div id="3"> </div>

<script>
    var left = document.getElementById("2");     var right = document.getElementById("1");    
     var div = document.getElementById("3");
    var x = 100;
    left.onclick = function () {             x=x+10;             div.style.left = x+"px";   
      }     right.onclick = function () {         x=x-10;         div.style.left = x+"px";     }

</script>

</body>
</html>

로그인 후 복사

두 번째, 키 값 제어
마찬가지로 html에서 div를 만들고

<div id="3">
</div>
<style>
       div {
            width: 100px;
            height: 100px;
            background-color: bisque;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>

로그인 후 복사

스타일을 지정합니다.

스크립트에서 div 가져오기

var div=document.getElementById("3");

로그인 후 복사

그런 다음 div의 왼쪽과 위쪽 변경을 제어하는 두 개의 변수를 선언합니다.

var px=100;
 var py =100;

로그인 후 복사

그런 다음 키 값을 가져옵니다
document.onkeydown(문서 문서 객체에서, 아무 키나 누르면 이 기능이 실행됩니다.
alert의 event.keyCode 출력은 키를 눌렀을 때 현재 키에 해당하는 이벤트 값에 해당합니다(즉, 각 키는 키 값에 해당합니다)

document.onkeydown = function(){
        alert(event.keyCode);
}

로그인 후 복사

그런 다음 테스트를 통과합니다. 왼쪽과 오른쪽으로 키 값을 가져오고 swich 문에서 div의 왼쪽과 위쪽을 변경하여 위치를 변경합니다.

switch (event.keyCode){
            case 37:
            px = px-10;
            div.style.left = px+"px";
                break;
            case 38:
                py = py-10;
                div.style.top = py+"px";
                break;
            case 39:
                px = px+10;
                div.style.left = px+"px";
                break;
            case 40:
                py = py+10;
                div.style.top = py+"px";
                break;
        }

로그인 후 복사

소스 코드:




    
    Title
    



 

<script>

    var div=document.getElementById(&quot;3&quot;);
    var px=100;
    var py =100;
    document.onkeydown = function(){
//        alert(event.keyCode);
        switch (event.keyCode){             case 37:             px = px-10;            
         div.style.left = px+"px";                 break;             case 38:                
          py = py-10;                 div.style.top = py+"px";                 break;           
            case 39:                 px = px+10;                 div.style.left = px+"px";                
             break;             case 40:                 py = py+10;                 div.style.top = py+"px";                 break;         }
    }

</script>

로그인 후 복사

위 내용은 JavaScript 향상 튜토리얼 - DOM 프로그래밍(div 이동을 제어하는 두 가지 방법)의 내용입니다. 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!