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

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

完成代码一：

<!--

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. modelsim基本操作步骤及每步骤问题解决1(后续有改动会更新)

    ①File ->New =>Project出现工程对话框->1)工程命名,2)安放路径自己设置,3)库默认work.点击OK 然后出现添加文件到工程对话框->可新建文件或直接添 ...

  2. UI自动化测试的那些事

    互联网产品的迭代速度远高于传统软件,尤其是移动APP不但更新频繁,还需要在不同硬件.系统版本的环境下进行大量兼容测试,这就给传统测试方法和测试工具带来了巨大挑战.为满足产品敏捷开发.快速迭代的需求,自 ...

  3. 使用sessionStorage、localStorage存储数组与对象（转）

    http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...

  4. Linux程序包管理初步-yum的使用

    何为yum? yum:由yellow dog研发,全称Yellowdog Update Modifier 是rhel系列系统上rpm包管理器的前端工具,可用来自动解决依赖关系,从而更好的实现程序包的安 ...

  5. java查看本机hostName可代表的ip列表

    java查看本机hostName可代表的ip列表 import java.net.InetAddress; public class ent { public static void main(Str ...

  6. （转） Lua使用心得一 LUA和VC整合

    这几天研究了一下lua,主要关注的是lua和vc之间的整合,把代码都写好放在VC宿主程序里,然后在lua里调用宿主程序的这些代码(或者叫接口.组件,随便你怎么叫),希望能用脚本来控制主程序的行为.这实 ...

  7. node.js 基础学习笔记1

    1. node -v 查看版本 node -e --js代码 node --进入编辑模式 Ctrl+C 退出编译模式 var http=require('http') http.createServe ...

  8. vim编辑格式与环境设置

    set wildmenu set backspace= set pastetoggle=<f3> filetype on filetype plugin on filetype inden ...

  9. 遇到的check the manual that corresponds to your MySQL server version for the right syntax错误

    遇到的check the manual that corresponds to your MySQL server version for the right syntax错误. 结果发现是SQL关键 ...

  10. tomcat 支持ssi功能配置

    1.SSI是Server Side Includes 的缩写,是嵌入到HTML页面的一组指令的集合.在返回请求的页面(包含SSI指令前),服务器会处理这些指令,并用处理的结果替换指令,然后把页面返回. ...