这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战。
今天分享一句看到的清醒文案：“人不能太闲，闲久了，努力一下就以为自己在拼命”，这不就是我嘛，这不就是你嘛！！！
好了进入正题，这篇文章利用javascript实现盒子往返移动的特效，继续往下看吧。
一、HTML布局
实现设计好相关需要的区域，html布局如下：
1、盒子和盒子移动区域
2、开始移动和停止移动按钮区域
布局核心html代码如下：
<div class="movebox">
<div class="box">
<div class="content"></div>
</div>
<div class="btn">
<button class="start">开始移动</button>
<button class="stop">停止移动</button>
</div>
</div>
二、CSS样式
因为主要是为了练习一下javascript的代码，html布局的样式信息怎么方便怎么来，样式如下：
加完样式信息后的布局如下图：
三、Javascript特效
1、获取相关标签对象：开始移动按钮对象，停止移动按钮对象，移动的盒子div标签对象，盒子移动区域标签对象。
let startBtn = document.getElementsByClassName('start')[0];
let stopBtn = document.getElementsByClassName('stop')[0];
let moveBox = document.getElementsByClassName('content')[0];
let box = document.getElementsByClassName('box')[0];
2、设置相关参数机器2默认值或初始值:盒子移动的速度、定时器、盒子移动的像素。
let moveSpeed = 10;
let timer = null;
let num = 0;
3、为开始移动按钮标签对象设置鼠标响应事件。 点击该按钮时，盒子开始时以设置的movespeed速度左右移动，即盒子到达边界时会往反方向移动。
startBtn.addEventListener('click', () => {
if (!timer) {
timer = setInterval(() => {
if (num >= box.offsetWidth - moveBox.offsetWidth || num < 0) {
moveSpeed = -moveSpeed;
}
num += moveSpeed;
moveBox.style.left = num + 'px';
}, 100);
}
});
4、为开始移动按钮标签对象设置鼠标响应事件。 点击该按钮时，清空定时器，使盒子不再移动。
stopBtn.addEventListener('click', () => {
clearInterval(timer);
timer = null;
});
至此，盒子移动特效就完成啦！撒花，嘻嘻嘻★,°:.☆(￣▽￣)/$: .°★ 。
