点击运动按钮后，方块会挨着浏览器的边，从左到右，从上到下转一圈。
这个我居然写了几天，我也是不想说什么咯。
完成代码一：
<!-- Author: XiaoWen Create a file: 2016-12-11 15:49:21 Last modified: 2016-12-11 22:07:09 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js围绕屏幕转圈的方块</title> <style> body{ margin: 0; padding: 0; } input{ display: block; height:20px; } div{ width: 100px; height:100px; background:#000; } </style> </head> <body> <input type="button" value="运动"> <div></div> <script> var ipt=document.getElementsByTagName("input")[0]; var div=document.getElementsByTagName("div")[0]; var scr_w=document.documentElement.clientWidth; var scr_h=document.documentElement.clientHeight; ipt.onclick=function(){ fn1("marginLeft",scr_w); }; function fn1(fx,size){ var i=0; var t1=setInterval(function(){ div.style[fx]=i+"px"; i++; if(i>size-100){ clearInterval(t1); fn2("marginTop",scr_h-20); } },10) } function fn2(fx,size){ var i=0; var t1=setInterval(function(){ div.style[fx]=i+"px"; i++; if(i>size-100){ clearInterval(t1); fn3("marginLeft",scr_w); } },10) } function fn3(fx,size){ var i=size-100; var t1=setInterval(function(){ div.style[fx]=i+"px"; i--; if(i<0){ clearInterval(t1); fn4("marginTop",scr_h); } },10) } function fn4(fx,size){ var i=size-100-20; var t1=setInterval(function(){ console.log(i,scr_h) div.style[fx]=i+"px"; i--; if(i<0){ clearInterval(t1); } },10) } </script> </body> </html>
完成代码二：
<!-- Author: XiaoWen Create a file: 2016-12-11 15:49:21 Last modified: 2016-12-11 23:50:26 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js围绕屏幕转圈的方块2</title> <style> body{ margin: 0; padding: 0; } input{ display: block; height:20px; } div{ width: 100px; height:100px; background:#000; } </style> </head> <body> <input type="button" value="运动"> <div></div> <script> var ipt=document.getElementsByTagName("input")[0]; var div=document.getElementsByTagName("div")[0]; var scr_w=document.documentElement.clientWidth; var scr_h=document.documentElement.clientHeight; var map=0; var t1; ipt.onclick=function(){ clearInterval(t1) fn1(); }; function fn1(fx,size){ var i=0; t1=setInterval(function(){ if(map==0){ console.log(map) div.style.marginLeft=i+"px"; i++; if(i>scr_w-100){ map=1; i=0; }; }else if(map==1){ console.log(map) div.style.marginTop=i+"px"; i++; if(i>scr_h-100-20){ map=2; i=scr_w-100;; }; }else if(map==2){ console.log(map) div.style.marginLeft=i+"px"; i--; if(i<0){ map=3; i=scr_h-100-20; }; }else{ console.log(map) div.style.marginTop=i+"px"; i--; if(i<0){ map=0; i=0; }; } },10) } </script> </body> </html>
完成代码三：看了别人的，我怎么没想到！
<!-- Author: XiaoWen Create a file: 2016-12-11 15:49:21 Last modified: 2016-12-12 09:58:24 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js围绕屏幕转圈的方块2</title> <style> body{ margin: 0; padding: 0; } input{ display: block; height:20px; } div{ width: 100px; height:100px; background:#000; } </style> </head> <body> <input type="button" value="运动"> <div></div> <script> var ipt=document.getElementsByTagName("input")[0]; var div=document.getElementsByTagName("div")[0]; var scr_w=document.documentElement.clientWidth; var scr_h=document.documentElement.clientHeight; var a=0; // 第1边 marginLeft++ var b=0; // 第2边 marginTop++ var a2=scr_w-100; // 第3边 marginLeft-- var b2=scr_h-100-20; // 第4边 marginTop-- var t1; ipt.onclick=function(){ clearInterval(t1) fn1(); }; function fn1(fx,size){ t1=setInterval(function(){ if(a<scr_w-100){ a++; div.style.marginLeft=a+"px"; }else if(b<scr_h-100-20){ b++; div.style.marginTop=b+"px"; }else if(a2>0){ a2--; div.style.marginLeft=a2+"px"; }else if(b2>0){ b2--; div.style.marginTop=b2+"px"; } },10) } </script> </body> </html>