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

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

完成代码一：

<!--

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>

js围绕屏幕转圈的方块的更多相关文章

  1. js获取屏幕大小

    1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...

  2. JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...

  3. js获取屏幕

    js获取屏幕(设备)宽高 <script language="javascript"> var h = ""; h += " 网页可见区域 ...

  4. js 检测屏幕分辨率

    js 检测屏幕分辨率 class screenChecker { constructor() { this.screen = window.screen; this.fullscreen = fals ...

  5. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

  6. JS获取屏幕，浏览器，网页高度宽度

      网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetW ...

  7. js判断屏幕分辨率的代码

    通过下面的代码判断分辨率 <script language="JavaScript"> <!-- Begin function redirectPage() { ...

  8. js获取屏幕（设备）宽高

    平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...

  9. JS 中屏幕、浏览器和文档的高度、宽度和距离

    1.各种对象 window.screen - 屏幕,window - 窗口,document.documentElement & document.body.parentNode - 文档,d ...

随机推荐

  1. [python] defaultdict

    import collections s = [('yellow', 1), ('blue', 2), ('yellow', 3), ('blue', 4), ('red', 1)] # defaul ...

  2. MATLAB - 运算符

    1.关系运算符用来比较两个数之间的大小关系,在Matlab中的关系运算符包括: <  小于 <= 小于或等于 >        大于 >=      大于或等于 ==     ...

  3. DateTools时间插件

    import java.text.DateFormat;import java.text.ParsePosition;import java.text.SimpleDateFormat;import ...

  4. C#读写xml文件的常用方法

    已知有一个XML文件(bookshop.xml)如下: <?xml version="1.0" encoding="gb2312" ?> <b ...

  5. SpringMVC中使用DWR

    SpringMVC中使用DWR重点在其配置当中. 1.  web.xml文件的配置 在DispatcherServlet中增加dwr的拦截来取代DwrServlet. 更改配置如下: <serv ...

  6. Windows Phone 8.1商店启动协议

    最近开发wp8.1已经两个月了,感觉坑不少,原来8时代的商店api多明了,微软不给封装就算了,至少你要在msdn上明显的地方标注下啊...................顺便在吐槽下bing,找了一个 ...

  7. 关闭 selinux 和防火墙

    1.关闭 selinux 修改 它的配置文档 /etc/selinux/conf 修改 SELINUX=disabled 或者permissive 2. 关闭 防火墙 输入命令 systemctl d ...

  8. inotify 心得

    inotify 心得 一.inotify简介 inotify是Linux内核2.6.13 (June 18, 2005)版本新增的一个子系统(API),它提供了一种监控文件系统(基于inode的)事件 ...

  9. C++类库介绍

    如果你有一定的C基础可能学起来比较容易些,但是学习C++的过程中又要尽量避免去使用一些C中的思想:平时还要多看一些高手写的代码,遇到问题多多思考,怎样才能把问题抽象化,以使自己头脑中有类的概念:最后别 ...

  10. PHP接口使用

    <?php interface IEmployee { function working(); } interface IDeveloper { function Coding(); } cla ...