<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#box {
100px;
height: 100px;
border-radius: 50%;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<body>
<div id="box">
</div>
<script>
var boxObj = document.getElementById('box');
document.onclick = function () {
startMove(boxObj, { top: 300, left: 400 }, function () {
alert('game over')
})
}
// 运动三要素: 谁运动 运动方向 停止目标
//
// ele 运动的元素对象
// obj {left:500,top:400} 运动方向和目标
// cb 运动结束的回调函数
var times = '';
function startMove(eleObj, obj, cb) {
clearInterval(times);
//清空定时器的开关
var onOff = false;
// 1 设置定时器
times = setInterval(function () {
// 2 遍历运动的方向和目标
for (var attr in obj) {
// console.log(attr, obj[attr]);
// 3 获取元素的实时位置.方便计算speed
var pos = parseInt(getPos(eleObj, attr));
// console.log('pos', pos);
// 4 计算speed值,并且取整
var speed = (obj[attr] - pos) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// console.log('speed', speed);
// 5 临界值的判断.到达临界值给开关true,避免直接清空定时器,
//影响另一个属性运动
if (pos + speed == obj[attr])
onOff = true;
// 6 让元素动起来
eleObj.style[attr] = pos + speed + 'px';
}
console.log(11);
if (onOff) {
clearInterval(times);
// 判断是否有回调函数,存在且调用
if (cb) cb();
}
}, 30);
}
// 获取元素的指定的css属性的值
function getPos(ele, attr) {
if (ele.currentStyle)
return ele.currentStyle[attr]
else
return getComputedStyle(ele)[attr]
}
</script>
</body>
</html>