js围绕屏幕转圈的方块

时间：2016-12-12 02:27:10 阅读：176 评论：0 收藏：0 [点我收藏+]

标签：20px span ica cte mod 技术分享 hid button ima

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

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

完成代码一：

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

js围绕屏幕转圈的方块

标签：20px span ica cte mod 技术分享 hid button ima

原文地址：http://www.cnblogs.com/daysme/p/6161079.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行