js围绕屏幕转圈的方块
点击运动按钮后，方块会挨着浏览器的边，从左到右，从上到下转一圈。
这个我居然写了几天，我也是不想说什么咯。
完成代码一：
<!--
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围绕屏幕转圈的方块的更多相关文章
- js获取屏幕大小
1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...
- JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...
- js获取屏幕
js获取屏幕(设备)宽高 <script language="javascript"> var h = ""; h += " 网页可见区域 ...
- js 检测屏幕分辨率
js 检测屏幕分辨率 class screenChecker { constructor() { this.screen = window.screen; this.fullscreen = fals ...
- js 根据屏幕大小调用不同的css文件
原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...
- JS获取屏幕，浏览器，网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetW ...
- js判断屏幕分辨率的代码
通过下面的代码判断分辨率 <script language="JavaScript"> <!-- Begin function redirectPage() { ...
- js获取屏幕（设备）宽高
平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...
- JS 中屏幕、浏览器和文档的高度、宽度和距离
1.各种对象 window.screen - 屏幕,window - 窗口,document.documentElement & document.body.parentNode - 文档,d ...
随机推荐
- QuickSort快速排序的多种实现和优化
并不是很懂wikipedia上面说快排的空间复杂度最坏情况是O(NlogN)啊,难道不是空间复杂度平均O(logN),最坏O(N)么--原地快排难道不是只要算递归栈深度就好了么--有谁给我解释一下啊( ...
- Selenium2+python自动化30-引入unittest框架
from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.com ...
- CommandArgument传多个参数
CommandArgument='<%#Eval("id")+","+Eval("interName") %>'
- sbt的assembly插件使用(打包所有依赖)
1.sbt是什么 对于sbt 我也是小白, 为了搞spark看了一下scala,学习scala时指定的构建工具就是sbt(因为sbt也是用scala开发的嘛),起初在我眼里就是一个maven(虽然ma ...
- MySQL表分区
MySQL的表分区 一.什么是表分区通俗地讲表分区是将一大表,根据条件分割成若干个小表.mysql5.1开始支持数据表分区了.如:某用户表的记录超过了600万条,那么就可以根据入库日期将表分区,也可以 ...
- Maven学习之 Settings
虽然天天在用,但是没有系统的学习过,总觉得别扭. 只能用于Java项目. 约定: repository 翻译成 仓库 build 翻译成 构建 build system 翻译成 构建系统 build ...
- NGINX下配置404错误页面的方法分享
NGINX下配置自定义的404页面是可行的,而且很简单,只需如下几步,需要的朋友可以参考下 1. 创建自己的404.html页面 2.更改nginx.conf在http定义区域加入: fastcg ...
- 基于选择重传ARQ传输协议的数据重传机制方案设计
原文链接: http://blog.csdn.net/pinghegood/article/details/7841281 1.背景 最近在项目中,由于使用TD网络传输数据,数据掉包严重,软件组老大 ...
- PowerDesigner 建模
File—New Model—Physical Data Model—Physical Diagram—Model name设置为test,DBMS属性设置为Microsoft SQL Server ...
- CityEngine中动态水的实现
地址:http://pan.baidu.com/share/link?shareid=3871210059&uk=3492170216 密码:am5b 在今年Esri全球用户大会和Esri中国 ...