<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 1000px; height:1000px; background-color: #cccccc; } #button{ float: right;} #content div{ width: 100px; height: 100px; background-color: aqua; text-align: center; color: #000; font-size: 28px; position: absolute; } </style> </head> <body> <input type="button" id="button" value="开始"> <div id="box"> <div id="content"> </div> </div> </body> <script> var button=document.getElementById("button"); var box=document.getElementById("box"); var content=document.getElementById("content"); var num=0; var left=0; var top=0; var l=left; var t=top; var str=""; button.οnclick=function () { if (num==0){ for(i=0;i<9;i++){ l=i*100; if (i<=4){ t=i*100; }else{ t=800-i*100; } str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>'; } } if (num==1){ for(i=0;i<9;i++){ t=i*100; if (i<=4){ l=(9-i)*100; }else{ l=(i+1)*100; } str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>'; }} if (num==2){ for(i=0;i<9;i++){ l=i*100; if (i<=4){ t=(9-i)*100; }else{ t=(i+1)*100; } str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>'; } } if (num==3){ for(i=0;i<9;i++){ t=i*100; if (i<=4){ l=(i+1)*100; }else{ l=(9-i)*100; } str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>'; } } num ++; if(num==4){ num=0; } content.innerHTML=str; str=""; } </script> </html>
转载于:https://my.oschina.net/u/3402290/blog/1532150