js围绕屏幕转圈的方块

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

完成代码一：

<!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>

完成代码二：

<!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>

完成代码三：看了别人的，我怎么没想到！

<!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>