Heim >Web-Frontend >js-Tutorial >Tutorial zur JavaScript-Erweiterung – DOM-Programmierung (zwei Methoden zur Steuerung der Div-Bewegung)

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

黄舟Original: 2017-01-21 16:21:111262Durchsuche

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

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");

Dann fügen Sie die Onclick-Funktion hinzu

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

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

var x = 100;

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

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>

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>

Rufen Sie das Div

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

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

var px=100;
 var py =100;

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

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

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tutorial zur JavaScript-Stärkung – Sechs Schritte zur Implementierung von SnakeNächster Artikel：Tutorial zur JavaScript-Stärkung – Sechs Schritte zur Implementierung von Snake

In Verbindung stehende Artikel

Mehr sehen