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

完成代码二：

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

完成代码三：看了别人的，我怎么没想到！

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

 

posted @ 2016-12-11 23:53  程序媛李李李李蕾  阅读(1243)  评论(0)  编辑  收藏  举报