Maison >interface Web >js tutoriel >Tutoriel d'amélioration de JavaScript - Programmation DOM (deux méthodes de contrôle du mouvement div)

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

黄舟original: 2017-01-21 16:21:111263parcourir

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

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

Ensuite, ajoutez la fonction onclick

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

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

var x = 100;

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

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>

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>

Récupérez le div

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

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;

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

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

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>

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tutoriel de renforcement de JavaScript – Six étapes pour implémenter SnakeArticle suivant：Tutoriel de renforcement de JavaScript – Six étapes pour implémenter Snake

Articles Liés

Voir plus