今天分享一句看到的清醒文案：“人不能太闲，闲久了，努力一下就以为自己在拼命”，这不就是我嘛，这不就是你嘛！！！

好了进入正题，这篇文章利用javascript实现盒子往返移动的特效，继续往下看吧。

一、HTML布局

实现设计好相关需要的区域，html布局如下：

1、盒子和盒子移动区域

2、开始移动和停止移动按钮区域

布局核心html代码如下：

二、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默认值或初始值:盒子移动的速度、定时器、盒子移动的像素。

3、为开始移动按钮标签对象设置鼠标响应事件。 点击该按钮时，盒子开始时以设置的movespeed速度左右移动，即盒子到达边界时会往反方向移动。

4、为开始移动按钮标签对象设置鼠标响应事件。 点击该按钮时，清空定时器，使盒子不再移动。

至此，盒子移动特效就完成啦！撒花，嘻嘻嘻★,°:.☆(￣▽￣)/$:  .°★ 。

B站视频网址：www.bilibili.com/video/BV1Yb…