Tutoriel d'amélioration de JavaScript - Programmation DOM (deux méthodes de contrôle du mouvement div)-js tutoriel-php.cn

Tutoriel d'amélioration de JavaScript - Programmation DOM (deux méthodes de contrôle du mouvement div)

黄舟

Libérer： 2017-01-21 16:21:11

original

1264 Les gens l'ont consulté

Le premier type de contrôle de bouton
Créez d'abord deux boutons html et un div et donnez un style au 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;
        }

Copier après la connexion

Ensuite, récupérez le div et les deux boutons dans le script

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

Copier après la connexion

Ensuite, ajoutez la fonction onclick

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

Copier après la connexion

Définissez une variable pour contrôler le changement à gauche du div

var x = 100;

Copier après la connexion

Déclenché lorsque le bouton est cliqué

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

Copier après la connexion

Code source :

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

Copier après la connexion

Deuxièmement, le contrôle des valeurs clés
Créez de la même manière un div en HTML et donnez-lui du style

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

Copier après la connexion

Récupérez le div

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

Copier après la connexion

dans le script puis déclarez deux variables pour contrôler le changement de la gauche et du haut du div

var px=100;
 var py =100;

Copier après la connexion

puis récupérez la valeur de la clé
document.onkeydown (dans l'objet document, appuyer sur n'importe quelle touche déclenchera cette fonction)
La sortie event.keyCode dans alert correspondra à la valeur de l'événement correspondant à la touche actuelle lorsque le la touche est enfoncée (c'est-à-dire que chaque touche correspond à une valeur clé)

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

Copier après la connexion

Ensuite, obtenez la valeur clé en testant le haut, le bas, la gauche et la droite, et changez la gauche et le haut du div dans l'instruction swich pour changer sa 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;
        }

Copier après la connexion

Code source :




    
    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>

Copier après la connexion

Ce qui précède est le contenu du didacticiel intensif JavaScript - Programmation DOM (deux méthodes de contrôle du mouvement des div), plus connexes. Veuillez faire attention au site Web PHP chinois (www.php.cn) pour le contenu !