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

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

完成代码一：

<!--

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. udp-->socket通信原理

    UDP数据通讯原理     UDP数据通讯分服务端(软件)和客户端端:     服务端(软件)(服务器)先运行,服务端,不需要事先知道客户端IP和port     客户端(软件)(客户端机器)后运行, ...

  2. 纯手工打造（不使用IDE）java web 项目

    必备环境 1.编译器:jdk 2.web服务器:tomcat 3.文本编辑器:sublime,编写java文件和jsp文件,没有的话用记事本也行. 一.建立工程目录结构,如下图 在操作系统下完成即可, ...

  3. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  4. Median of Two Sorted Arrays

    题目:https://leetcode.com/problems/median-of-two-sorted-arrays/ 算法分析 这道题的目的,是为了从两个有序列中找到合并序列之后的中位数,即两个 ...

  5. VB6.0 读取Excel文件并返还数据集RecordSet

    读取Excel文件并返还数据集RecordSet 该方法适用于.xls,.xlsx类型的文件 读取Excel文件的Function: '取得数据集 Function getRecordSetForEx ...

  6. SILVERLIGHT 多维表头、复杂表头 MULTIPLE HEADER

    先上图, 众所周知,利用silverlight datagrid展示数据相当方便,但是想要弄出一个漂亮的表头却要费尽周折.此文的目的就是简要介绍一下利用第三方控件 C1.Silverlight.Fle ...

  7. 1201新课程TSQL语句

    1.创建数据库 create datebase 表名称 2.删除数据库 drop datebase 表名称 3.创建表 -create table test(表名称)( code(列名称) varch ...

  8. Floyd 求最短路（poj 1161）

    Floyd-Warshall算法介绍: Floyd-Warshall算法的原理是动态规划. 设为从到的只以集合中的节点为中间节点的最短路径的长度. 若最短路径经过点k,则: 若最短路径不经过点k,则. ...

  9. JS实现滑动门效果

    html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin ...

  10. 面向对象、类与对象、成员与局部变量、封装、private、构造函数、this、static、extends、super、final、abstract、interface、多态、内部类、异常【5】

    若有不正之处,请多多谅解并欢迎批评指正,不甚感激. 请尊重作者劳动成果: 本文原创作者:pipi-changing本文原创出处:http://www.cnblogs.com/pipi-changing ...