Tidak mengapa untuk memanggil setiap fungsi secara individu pada acara klik, tetapi ia tidak akan berfungsi selepas menulis badan gelung. Fungsi sahaja adalah baik Saya sentiasa menulis satu ujian satu demi satu, dan kemudian acara klik boleh dipaparkan secara individu, tetapi terdapat masalah jika terdapat badan gelung.
<!DOCTYPE html>
<html lang="ms">
<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></kepala>
<badan>
<masukkan id="btn" type="button" value="Klik untuk menjana li"/>
</body>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
document.body.innerHTML += '<p>' + i + '</p>'; dilaksanakan sekali k Ia hanya kes ==0