点击运动按钮后，方块会挨着浏览器的边，从左到右，从上到下转一圈。
这个我居然写了几天，我也是不想说什么咯。
完成代码一：
<!--
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>
时间： 2024-12-30 06:01:28