<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
.box2{
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
margin-top: 150px;
}
</style>
</head>
<body>
<button type="button" class="btn">按钮</button>
<div class="box1"></div>
<div class="box2"></div>
<script type="text/javascript">
var btn = document.querySelector(".btn")
btn.onclick = function(){
var box1 = document.querySelector(".box1")
var a= animationFn(box1,300,3)
var box2 = document.querySelector(".box2")
var b= animationFn(box2,100,5)
}
// 传递的是元素 可以在元素身上挂载一个属性
// 就可以保证每个定时器都是独一无二的
// 就能坐到控制多个定时器
// 只要传递元素 和 到达的距离(target) 速度 s
function animationFn(element,target,s){
if(element.timeId){
clearInterval(element.timeId)
}
element.timeId = setInterval(()=>{
var current = element.offsetLeft;
if(current > target){
element.style.left = target + 'px'
clearInterval(element.timeId)
return ;
}
current += s
element.style.left = current + 'px'
},30)
}
</script>
</body>
</html>
|