Tutorial zur JavaScript-Erweiterung – DOM-Programmierung (zwei Methoden zur Steuerung der Div-Bewegung)-js-Tutorial-php.cn

Tutorial zur JavaScript-Erweiterung – DOM-Programmierung (zwei Methoden zur Steuerung der Div-Bewegung)

黄舟

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

Original

1263 Leute haben es durchsucht

Die erste Art der Schaltflächensteuerung
Erstellen Sie zunächst zwei HTML-Schaltflächen und ein Div und geben Sie dem Div einen Stil

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

Nach dem Login kopieren

Dann erhalten Sie das Div und zwei Schaltflächen im Skript

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

Nach dem Login kopieren

Dann fügen Sie die Onclick-Funktion hinzu

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

Nach dem Login kopieren

Legen Sie eine Variable fest, um die Linksänderung des Div zu steuern

var x = 100;

Nach dem Login kopieren

Wird ausgelöst, wenn auf die Schaltfläche geklickt wird

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

Nach dem Login kopieren

Quellcode:

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

Nach dem Login kopieren

Zweitens Schlüsselwertkontrolle
Erstellen Sie auf ähnliche Weise ein Div in HTML und geben Sie ihm Stil

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

Nach dem Login kopieren

Rufen Sie das Div

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

Nach dem Login kopieren

im Skript ab und deklarieren Sie dann zwei Variablen, um die Änderung links und oben im Div

var px=100;
 var py =100;

Nach dem Login kopieren

<🎜 zu steuern > und dann den Schlüsselwert abrufen

document (im Dokumentobjekt wird durch Drücken einer beliebigen Taste diese Funktion ausgelöst)
Die Ausgabe von event.keyCode in der Warnung entspricht dem Ereigniswert, der der aktuellen Taste entspricht, wenn die Taste gedrückt wird (d. h. jede Taste entspricht einem Schlüsselwert)

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

Nach dem Login kopieren

Ermitteln Sie dann den Schlüsselwert, indem Sie oben, unten, links und rechts testen Ändern Sie den linken und oberen Rand des Div in der Swich-Anweisung, um seine Position zu ändern

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

Nach dem Login kopieren

Quellcode:




    
    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>

Nach dem Login kopieren

Das Obige ist der Inhalt des JavaScript-Intensiv-Tutorials – DOM-Programmierung (zwei Methoden zur Steuerung der Div-Bewegung), mehr verwandt. Bitte beachten Sie den Inhalt der chinesischen PHP-Website (www.php.cn)!