js实现点击按钮自动生成V字形，可连续点击四次

来源：互联网发布：apache负载均衡编辑：程序博客网时间：2024/05/17 08:06

效果图大致如下：

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动生成V字形</title> <style type="text/css"> div{ width: 50px; height: 50px; background: red; color: #fff; font-size: 30px; line-height: 50px; text-align: center; position: absolute; margin: 50px auto; display: none; } </style> </head> <body> <input type="button" value="自动生成V字形" id="btn" onclick="do1('btn')";> <div></div> <div></div> <div></div> <div></div> <div></div> <script type="text/javascript"> var btn=document.getElementById("btn"); var div=document.getElementsByTagName('div'); var str=''; var j=0; function do1(id){ fa(); document.getElementById("btn").onclick = do2; } function do2(id){ fb(); document.getElementById("btn").onclick = do3; } function do3(id){ fc(); document.getElementById("btn").onclick = do4; } function do4(id){ fd(); } function fa(){ for(i=0;i<div.length;i++){ div[i].innerHTML=i; if(i>div.length/2){ div[i].style.left=50*i+'px'; j+=2; div[i].style.top=50*(i-j)+'px'; }else{ div[i].style.left=50*i+'px'; div[i].style.top=50*i+'px'; } div[i].style.display="block"; } } /*btn.onclick=function(){ for(i=0;i<div.length;i++){ div[i].innerHTML=i; if(i<3){ div[i].style.left=50*i+50+'px'; div[i].style.top=50*i+'px'; }else{ div[i].style.left=50*(5-i)+'px'; div[i].style.top=50*i+'px'; } div[i].style.display="block"; } }*/ function fb(){ for(i=0;i<div.length;i++){ div[i].innerHTML=i; if(i<3){ div[i].style.left=50*i+50+'px'; div[i].style.top=50*i+'px'; }else{ div[i].style.left=50*(5-i)+'px'; div[i].style.top=50*i+'px'; } div[i].style.display="block"; } } function fc(){ for(i=0;i<div.length;i++){ div[i].innerHTML=i; if(i<3){ div[i].style.left=50+50*i+'px'; div[i].style.top=50*(5-i)-50+'px'; }else{ div[i].style.left=50+50*i+'px'; div[i].style.top=50*i+'px'; } div[i].style.display="block"; } } function fd(){ for(i=0;i<div.length;i++){ div[i].innerHTML=i; if(i<3){ div[i].style.left=50*(5-i)+'px'; div[i].style.top=50*i+'px'; }else{ div[i].style.left=50+50*(i)+'px'; div[i].style.top=50*i+'px'; } div[i].style.display="block"; } } </script> </body> </html>

阅读全文

0 0