js围绕屏幕转圈的方块

点击运动按钮后，方块会挨着浏览器的边，从左到右，从上到下转一圈。

这个我居然写了几天，我也是不想说什么咯。

js围绕屏幕转圈的方块

完成代码一：

<!--
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>

View Code