要求:
点击按钮,让物体开始移动,利用定时器的方法让物体移动至终点时停止移动
思路:
首先,需要知道物体实时的位移量,这里需要定义一个getStyle函数来获取物体当前的样式
其次,开启一个定时器setInterval(),让物体开始移动
最后,需要设置关闭定时器clearInterval()的条件
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: #FF0000;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
let box1 = document.getElementById("box1")
let btn01 = document.getElementById("btn01")
let timer
btn01.onclick = function(){
// 关闭上一个定时器
clearInterval(timer)
// 开启一个定时器,用来执行动画效果
timer = setInterval(function(){
// 获取box1的原来的left值
let oldValue = parseInt(getStyle(box1,"left"))
let newValue = oldValue + 1
// 判断newValue是否大于800
if (newValue > 800){
newValue = 800
}
box1.style.left = newValue + "px"
// 当元素移动到800px时,使其停止执行动画
if (newValue == 800){
clearInterval(timer)
}
}, 30)
}
}
// 定义一个函数,用来获取指定元素的当前的样式
function getStyle(obj, name){
if (window.getComputedStyle){
return getComputedStyle(obj, null)[name]
}else{
return obj.currentStyle[name]
}
}
</script>
</head>
<body>
<button id="btn01" type="button">点击按钮以后box1向右移动</button>
<br><br>
<div id="box1"></div>
<div style="width: 0px; height: 1000px; border-left: 1px solid black; position: absolute; top: 0px; left: 800px;"></div>
</body>
</html>
结果展示:
喜欢小编的关注、点赞走一波呦,后期会不定期分享更多Python、JS和前端相关知识