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

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

完成代码一：

<!--

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. setTimeout注意事项

    <script type="text/javascript">     function  show(v){        alert(v);    }    func ...

  2. iOS9的新特性以及适配方案

    新的iOS 9系统比iOS8更稳定,功能更全面,而且还更加开放.iOS 9加入了更多的新功能,包括更加智能的Siri,新加入的省电模式.iOS 9为开发者提供5000个全新的API. 1. 限制HTT ...

  3. Xml文件操作的其中一个使用方法：

    XmlNodeList students = doc.DocumentElement.ChildNodes;//Student节点集合 foreach (XmlNode stu in students ...

  4. Light OJ 1025 - The Specials Menu（动态规划-区间dp）

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1025 题目大意:一串字符, 通过删除其中一些字符, 能够使这串字符变成回文串. ...

  5. 安装window服务

    1 使用管理员权限启动命令提示符 2 输入 cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 3 输入installUtil.exe  服务文件所在目录 ...

  6. 第四章 Leader选举算法分析

    Leader选举 学习leader选举算法,主要是从选举概述,算法分析与源码分析(后续章节写)三个方面进行. Leader选举概述 服务器启动时期的Leader选举 选举的隐式条件便是ZooKeepe ...

  7. Daily Scrum 12.11

    今日完成任务: 解决了类型同时存在于两个自动生成的DLL中导致编译不通过的问题:修复了主页标签显示的BUG:修复异常,网站可以在服务器端正常运行. 明日任务: 黎柱金 解决上传文档时建立文档和标签联系 ...

  8. Browser设置UA值

    SWE Browser中的OptionMenu是Controller通过onKeyDown监听KEYCODE_MENU来显示的 public boolean onKeyDown(int keyCode ...

  9. freeCodeCamp:Factorialize a Number

    计算一个整数的阶乘 如果用字母n来代表一个整数,阶乘代表着所有小于或等于n的整数的乘积. 阶乘通常简写成 n! 例如: 5! = 1 * 2 * 3 * 4 * 5 = 120 /*思路 阶乘等于fo ...

  10. 无向图最小生成树（prim算法）

    普里姆算法(Prim算法),图论中的一种算法,可在加权连通图里搜索最小生成树.意即由此算法搜索到的边子集所构成的树中,不但包括了连通图里的所有顶点,且其所有边的权值之和亦为最小.该算法于1930年由捷 ...