补充：
继上一篇定时器的功能之后，本篇将对上篇应用的功能加以扩充。具体增加的功能有：
新增一个向左移动的按钮，点击该按钮后，物体会向左移动
因向左和向右移动二者的功能大同小异，所以设计一个公共的移动函数方法move()，使其轻松实现向左和向右移动的功能
因向左和向右的方向取决于输入的speed的速度值的正负，正值向左，负值向右。但该方法不是很好，需要额外输入速度的正负号，因此需要设计一个方法，可以实现speed的输入值一直为正，但仍可以实现向左和向右移动
代码演示：
<!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 btn02 = document.getElementById("btn02")
btn01.onclick = function(){
move(box1, 800, 10)
}
btn02.onclick = function(){
move(box1, 0, 10)
}
}
let timer
// 尝试创建一个可以执行简单动画的函数
function move(obj, target, speed){
// 关闭上一个定时器
clearInterval(timer)
// 获取元素目前的位置
let current = parseInt(getStyle(obj,"left"))
// 判断速度的正负值
if (current > target){
speed = -speed
}
// 开启一个定时器，用来执行动画效果
timer = setInterval(function(){
// 获取box1的原来的left值
let oldValue = parseInt(getStyle(obj,"left"))
let newValue = oldValue + speed
// 判断newValue是否大于800
if (speed < 0 && newValue < target || speed > 0 && newValue > target){
newValue = target
}
obj.style.left = newValue + "px"
// 当元素移动到800px时，使其停止执行动画
if (newValue == target){
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>
<button id="btn02" 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>
封装后的公共移动函数方法如下，可以有效减少代码的高重复率：
let timer
// 尝试创建一个可以执行简单动画的函数
function move(obj, target, speed){
// 关闭上一个定时器
clearInterval(timer)
// 获取元素目前的位置
let current = parseInt(getStyle(obj,"left"))
// 判断速度的正负值
if (current > target){
speed = -speed
}
// 开启一个定时器，用来执行动画效果
timer = setInterval(function(){
// 获取box1的原来的left值
let oldValue = parseInt(getStyle(obj,"left"))
let newValue = oldValue + speed
// 判断newValue是否大于800
if (speed < 0 && newValue < target || speed > 0 && newValue > target){
newValue = target
}
obj.style.left = newValue + "px"
// 当元素移动到800px时，使其停止执行动画
if (newValue == target){
clearInterval(timer)
}
}, 30)
}
设计的一个思想，可以只输入速度speed正值，就可以实现物体向左向右移动：
// 获取元素目前的位置
let current = parseInt(getStyle(obj,"left"))
// 判断速度的正负值
if (current > target){
speed = -speed
}
结果展示：
喜欢小编的关注、点赞走一波呦，后期会不定期分享更多Python、JS和前端相关知识