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

好了进入正题，这篇文章利用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; }); 复制代码

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