效果如下：
小块一开始在浏览器左上方，点击一下，开始移动：
——————————————————————————————————————
点击一下，开始向下移动：
点击一下，开始向左移动，再点击向上。。。。。。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV_MOVE_Pro</title>
<style>
*{margin: 0; padding:0;}
#div0{height: 160px;width: 160px;position: absolute;background-color: blue;}
</style>
</head>
<body>
<div id="div0">
</div>
<script>
var div0=document.getElementById("div0");//设置监听事件
div0.addEventListener("click",clickHandler);
var bool=false;//bool开关设置
var X=0;//移动的属性，X轴
var Y=0;//移动的属性，Y轴
var num=0;//点击的次数
//开关设置
function clickHandler(e) {
e=e||window.event;
bool=true;//设置点击一直是ture 只有开始点击的状态 点击后一直走
num++;
// bool=!bool;
}
setInterval(move,1);//函数名 毫秒——过多长时间运行一次这个函数
//移动函数，通过开关设置；
function move() {
if(!bool) return;
switch(num%4){
case 1:
X++;
div0.style.left=X+"px";
break;
case 2:
Y++;
div0.style.top=Y+"px";
break;
case 3:
X--;
div0.style.left=X+"px";
break;
case 0:
Y--;
div0.style.top=Y+"px";
break;
}
}
</script>
</body>
</html>
737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
