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 ...
随机推荐
- Ruby-Array数组
1.创建数组 a=Array.new(6,obj=nil) #=> [nil, nil, nil, nil, nil, nil] 设置默认值 a=Array.new(6) ...
- GridView多列排序
public class WebGridView:GridView { 属性#region 属性 /**//// <summary> /// 是否启用或者禁止多列排序 /// </s ...
- 用window.showModelDialog() 打开的页面的返回值
有两个页面也个 Default1.aspx 另外一个是 Default2.aspx Default1.aspx 有个按钮是用来打开Default2.aspx页面的 按钮的js代码是 var win ...
- wpf 旋转效果
<Grid> <Grid.Triggers> <EventTrigger RoutedEvent="Page.Loaded"> <Begi ...
- .net下各个数据类型所占用的字节
Console.WriteLine(sizeof(int)); Console.WriteLine(sizeof(short)); Console.WriteLine(sizeof(char)); C ...
- Servlet实现自动刷新功能
使用Servlet实现自动刷新功能,每一秒钟在浏览器输出一个随机数字. package chensi.com; import java.io.IOException; import java.util ...
- 启用 mvc webapi 的 session功能可用
默认 mvc webapi 不开启 session 会话支持 所以需要修改配置,在 Global 开启 session 支持 如下: 1.重写 init() 方法 public override vo ...
- XHTML跟HTML的区别
其实二者并没有什么区别,只是THTML的要求更加严格,比如说 1.XHTML 元素必须被正确地嵌套. 错误:<p><span>this is example.</p> ...
- 第七章 springboot + retrofit
retrofit:一套RESTful架构的Android(Java)客户端实现. 好处: 基于注解 提供JSON to POJO,POJO to JSON,网络请求(POST,GET,PUT,DELE ...
- [linux]树莓派入手体验和系统安装
背景 一直想捣鼓点什么东西.当看到树莓派的时候,就是它了. 树莓派可以安装Linux系统,而我在工作当中,可以说Linux是一半工作环境.树莓派真是个好东西,这个东西应该在我学习linxu/Unix的 ...