自动生成10个li(提高版)-四次切换

来源：互联网发布：试用赚钱软件编辑：程序博客网时间：2024/06/06 01:01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>li{width:50px; height:50px; background:red; color:#fff; font-size:18px; text-align:center; line-height:50px; position:absolute ; top:0px; left:0px; font-weight:bold;}</style><script>   window.onload = function(){   var aUL = document.getElementsByTagName("ul")[0];    var aLi =   aUL.getElementsByTagName("li");var oBtn = document.getElementById("btn");var click = 0;function ftn(){  for(var i=0; i<5 ; i++){  aUL.innerHTML += '<li>' + i +'</li>';}}oBtn.onclick= function(){aUL.innerHTML=' ' ;//不加这一句，后面的li数量会叠加ftn();//第一个V字形v       if(click%4==0){for(var i=0;i<aLi.length;i++){       if(i< aLi.length/2){            aLi[i].style.left = i*50 +'px';             aLi[i].style.top =50+50*(aLi.length/2-i) +'px';     } else{                    aLi[i].style.left = i * 50 +'px';              aLi[i].style.top=50+50*(i-aLi.length/2+1)+'px';                                                                            }                                                                    }              }                 //第二个V字形<                                                     else if(click%4==1){                                             for(var i=0;i<aLi.length;i++){                             if(i< aLi.length/2){            aLi[i].style.top= 50+i*50 +'px';             aLi[i].style.left =50+50*(aLi.length/2-i-1)+'px'; }      else{            aLi[i].style.top =50+ i * 50 +'px';             aLi[i].style.left=(i-aLi.length/2+1)*50+'px';                                                                                  }    }   }   //第三个排列>  else if(click%4==2){          for(var i=0;i<aLi.length;i++){        if(i< aLi.length/2){            aLi[i].style.top= 50+i*50 +'px';             aLi[i].style.left =i*50+'px';}else{            aLi[i].style.top =50+i*50+'px';             aLi[i].style.left=50*(aLi.length-i-1)+'px';                                                                             }    }  }//第四个排列,倒v      else{  for(var i=0;i<aLi.length;i++){                        if(i< aLi.length/2){            aLi[i].style.top=50+i*50+'px';             aLi[i].style.left =i*50+'px'; }else{            aLi[i].style.top =50*(aLi.length-i) +'px';             aLi[i].style.left=i*50+'px';                                                                             }          }  }                                  click++; }};</script></head><body> <input id="btn" type="button" value="按钮" />        <ul></ul></body></html>
阅读全文
0 0