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

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

完成代码一：

<!--

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. shell中单引号和双引号

    在shell中声明变量后直接使用: #!/bin/bash na=zhagnsan ag=11 echo '$na is $ag years old' 输出:$na is $ag years old ...

  2. js灵活打印web页面区域内容的通用方法

      我们做网站,经常需要打印页面指定区域的内容,而网上关于这块的说法很多,各种各样的打印控件也不少.但许多打印方案都不怎么好,至少我不喜欢,要么封装复杂,要么难以维护.正好现在的项目也需要用到 ...

  3. AESwithJCE http://www.coderanch.com/how-to/content/AES_v1.html

    Using AES with Java Technology By Rags SrinivasJune 2003 In September 2000, the National Institute o ...

  4. DIV半透明，内层不受影响的代码

    <div style=" background:rgba(0, 0, 0, 0.1)"><br /> <img src="http://im ...

  5. DB2不记录事务日志

    1. DB2大数据处理不记录事务日志步骤:  建表需要添加属性“NOT LOGGED INITIALLY”  在大批量更改操作的同一个事务开始时执行:“ALTER TABLE tabname ACTI ...

  6. Floyd | | jzoj[1218] | | [Usaco2009 Dec]Toll 过路费 | | BZOJ 1774 | | 我也不知道该怎么写

    写在前面:老师说这一道题是神题,事实上确实如此,主要是考察对Floyd的理解 ******************************题目.txt************************* ...

  7. SD-WAN技术分析

    1.概述 转载须注明来自 SDNLAB并附上本文链接. 本文链接:http://www.sdnlab.com/17810.html 宽带接入以及Internet骨干网容量的持续提升,促使企业WAN技术 ...

  8. [linux]树莓派入手体验和系统安装

    背景 一直想捣鼓点什么东西.当看到树莓派的时候,就是它了. 树莓派可以安装Linux系统,而我在工作当中,可以说Linux是一半工作环境.树莓派真是个好东西,这个东西应该在我学习linxu/Unix的 ...

  9. 【JSP】Tiles框架的基本使用

    Tiles介绍 Tiles 是一种JSP布局框架,主要目的是为了将复杂的jsp页面作为一个的页面的部分机能,然后用来组合成一个最终表示用页面用的,这样的话,便于对页面的各个机能的变更及维护. Tile ...

  10. （Python） 安装、基本语法

    从今天起,我将开启python学习模式,并用博客记录学习的过程和相关知识点 1.Python下载安装 可以在官网:https://www.python.org/downloads/ 中下载各种版本的P ...