<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
input {
margin-top: 20px;
}
div {
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//div要移动,要脱离文档流---position:absolute
//如果样式的代码是在style的标签中设置,外面是获取不到
//如果样式的代码是在style的属性设置,外面是可以获取
//获取div的当前位置
//console.log(my$("dv").offsetLeft);
//点击第一个按钮移动到400px
my$("btn1").onclick = function () {
//一会要清理定时器(只产生一个定时器)
var timeId= setInterval(function () {
//获取div的当前的位置
var current = my$("dv").offsetLeft;//数字类型,没有px
//div每次移动多少像素---步数
var step = 9;
//每次移动后的距离
current += step;
//判断当前移动后的位置是否到达目标位置
if(current<=400){
my$("dv").style.left=current+"px";
}else{
//清理定时器
clearInterval(timeId);
}
}, 20);
};
//点击第二个按钮移动到800px
my$("btn2").onclick = function () {
//一会要清理定时器(只产生一个定时器)
var timeId= setInterval(function () {
//获取div的当前的位置
var current = my$("dv").offsetLeft;//数字类型,没有px
//div每次移动多少像素---步数
var step = 10;
//每次移动后的距离
current += step;
//判断当前移动后的位置是否到达目标位置
if(current<=800){
my$("dv").style.left=current+"px";
}else{
//清理定时器
clearInterval(timeId);
}
}, 20);
};
</script>
</body>
</html>