移动的方块
页面展示：
功能说明：
当鼠标点击‘开始动’时，方块开始水平移动，当达到边界时反向移动，当点击‘停止哈’时方块停止不动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动的方块</title>
<style type="text/css">
*{
margin: 0;
padding: 0;;
}
#dabo{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
/*left: 100px;*/
}
button{
position: relative;
top:120px;
}
</style>
</head>
<body>
<div id="dabo"></div>
<button>开始动</button>
<button>停止哈</button>
<script type="text/javascript">
//1 方块的变换也就是位置的变换 = 样式的变换
//2 位置在联系变换时，需要一个定时器（定时器要开关）
//3 （条件）位置是在一个区域内一直移动过去，移动回来的
//点击事件
let buts = document.getElementsByTagName('button');
let div = document.getElementById('dabo');
let bian = document.body;
let timer = null;
let num = 0;
buts[0].onclick = function(){
let j = 1;//定义移动距离
if(timer == null){
let i = bian.offsetWidth-div.offsetWidth;//i是方块的移动区间
//定时器setInterval
timer = setInterval(()=>{
num += j;//位置增加
//当移动到边界时反向移动
/*console.log(i);//测试边的位置
//console.log(num);*/
div.style.left = num +'px';
if(num >= i || num <=0){
//console.log('停止');
//clearInterval(timer);
j = -j;//移动的距离减小
}
},10);
}
}
buts[1].onclick = function(){
clearInterval(timer);
timer = null;
}
</script>
</body>
</html>
ok，结束！！！
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
