javascript - Concernant le problème de l'appel de fonction, le corps de la boucle de l'événement click ne peut pas boucler ces quatre fonctions, mais le corps de la boucle peut être bouclé en utilisant alert.

Vous pouvez appeler chaque fonction individuellement lors d'un événement de clic, mais cela ne fonctionnera pas après avoir écrit un corps de boucle. La fonction seule convient. J'écris toujours un test un par un, puis l'événement de clic peut être affiché individuellement, mais il y a un problème s'il y a un corps de boucle.
<!DOCTYPE html>
<html lang="fr">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style>
    *{padding:0;margin: 0;}
    #btn{position: absolute;top:0;left:300px;}
    p{width: 50px;height:50px;position: absolute;top:0;left:0;background:green;font-size: 30px; text-align:center;color:red;line-height: 50px;cursor: pointer;}
</style>
<script>
    window.onload=function () {
        var btn = document.getElementById("btn");
        var op = document.getElementsByTagName("p");
        function first() {
            {
               // btn.style.display = "none";
                for (var i = 0; i < 5; i++) {
                    document.body.innerHTML += '<p>' + i + '</p>';
                }
                for (i = 0; i < op.length; i++) {
                    //op[i].index = i;
                    if (i > op.length / 2) {
                        op[i].style.left = i * 60 + "px";
                        op[i].style.top = (i - parseInt(op.length / 2)) * 60 + "px";
                    }
                    else {
                       // alert(i);
                        op[i].style.top = (parseInt(op.length / 2) - i) * 60 + "px";
                        op[i].style.left = i * 60 + "px";
                    }
                }
            }
        }
        function second() {
           // btn.style.display="none";
            for (var i = 0; i < 5; i++) {
                 document.box2.innerHTML += '<p id="box">' + i + '</p>';
            }
            for ( i = 0; i < op.length; i++) {
                //op[i].index = i;
                if(i>op.length/2){
                    op[i].style.left = (op.length-i -1)* 60 + "px";
                    op[i].style.top=i*60+"px";
                }
                else {
                    // alert( i);
                    op[i].style.top =  i* 60 + "px";
                    op[i].style.left = i * 60 + "px";
                }
            }
        }
        function three() {
                //btn.style.display = "none";
                for (var i = 0; i < 5; i++) {
                    document.body.innerHTML += '<p>' + i + '</p>';
                }
                for (i = 0; i < op.length; i++) {
                    //op[i].index = i;
                    if (i > op.length / 2) {
                        op[i].style.left = (i - parseInt(op.length / 2)) * 60 + "px";
                        op[i].style.top = i * 60 + "px";
                    }
                    else {
                        // alert( i);
                        op[i].style.top = i * 60 + "px";
                        op[i].style.left = ( parseInt(op.length / 2) - i) * 60 + "px";
                    }
                }
            }
        function  four()  {
            //btn.style.display="none";
            for (var i = 0; i < 5; i++) {
                document.body.innerHTML += '<p>' + i +'</p>';
            }
            for ( i = 0; i < op.length; i++) {
                op[i].index = i;
                if(i>op.length/2){
                    op[i].style.left = i * 60 + "px";
                    op[i].style.top=(op.length-i-1)*60+"px";
                }
                else {
                    op[i].style.top = i * 60 + "px";
                    op[i].style.left = i * 60 + "px";
                }
            }
        }
        var k=0;
        btn.onclick = function () {
            //if(k==0){alert(1)}
            if(k==0){first()}
            if(k==1){second()}
            if(k==2){three()}
            if(k==3){four()}
            k++;
          // first();
           //second();
           //three();
           //four();

        }
    };
</script>

</head>
<body>
<input id="btn" type="button" value="Cliquez pour générer li"/>
</body>
</html>

扔个三星炸死你2729 Il y a quelques jours813

javascript - Concernant le problème de l'appel de fonction, le corps de la boucle de l'événement click ne peut pas boucler ces quatre fonctions, mais le corps de la boucle peut être bouclé en utilisant alert.

répondre à tous(1)je répondrai