<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0.1px;
}
</style>
</head>
<body>
<button>向前移动</button>
<div></div>
<script src="../ujiuye.js"></script>
<script>
// 效果: 点击按钮,让块从0的位置移动到1000的位置并停止
// 获取元素
var btn = document.getElementsByTagName('button')[0];
var div = document.getElementsByTagName('div')[0];
console.log(btn, div);
var timer = null;
// 点击按钮
btn.onclick = function () {
// 每隔20ms移动一次, 基于当前位置+10
// 定时器的叠加
// 每次点击的时候先清除上一次的定时器
clearInterval(timer);
timer = setInterval(function () {
// 当前位置
var l = parseFloat(getStyle(div, 'left')) + 10;
console.log(l);
// 判断, 判断当前l是否大于等于1000, 需要清除定时器
if(l >= 1000){
l = 1000;
clearInterval(timer);
}
// 将l赋值给div的left
div.style.left = l + 'px';
}, 20);
}
</script>
</body>
</html>