<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 10px;
width: 100px;
height: 50px;
background-color: purple;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" />
<input type="button" value="移动到800px" />
<div ></div>
<script src="common.js"></script>
<script>
my$("bt1").onclick = function () {
//获取div当前的left值
var left = my$("dv").offsetLeft;
var step = 10;
timeId = setInterval(function () {
if (left <= 400) {
left += step;
my$("dv").style.left = left + "px";
console.log(left);
} else {
clearInterval(timeId);
}
}, 10)
};
my$("bt2").onclick = function () {
//获取div当前的left值
var left = my$("dv").offsetLeft;
var step = 10;
timeId = setInterval(function () {
if (left <= 800) {
left += step;
my$("dv").style.left = left + "px";
console.log(left);
} else {
clearInterval(timeId);
}
}, 10)
};
</script>
</body>
</html>