JavaScript enhancement tutorial - DOM programming (two methods of controlling div movement)-JS Tutorial-php.cn

JavaScript enhancement tutorial - DOM programming (two methods of controlling div movement)

黄舟

Release： 2017-01-21 16:21:11

Original

1265 people have browsed it

The first button control
First create two html buttons and a div and give the div a style

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

Copy after login

Then get the div and two buttons in the script

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

Copy after login

Then add the onclick function

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

Copy after login

Set a variable to control the left change of the div

var x = 100;

Copy after login

Triggered when the button is clicked

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

Copy after login

Source 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>

Copy after login

Second type, key value control
Similarly create a div in html and give it style

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

Copy after login

Get the div in the script

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

Copy after login

Then declare two variables to control changing the left and top of the div

var px=100;
 var py =100;

Copy after login

Then get the key value
document.onkeydown (in the document document object, pressing any key will trigger this function)## The event.keyCode output in #alert will correspond to the event value corresponding to the current key when the key is pressed (that is, each key corresponds to a key value)

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

Copy after login

Then pass the test Get the key values left and right, change the left and top of the div in the swich statement to change its position

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

Copy after login

Source code:




    
    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>

Copy after login

The above is the content of the JavaScript enhancement tutorial - DOM programming (two methods of controlling div movement). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!