今天分享一句看到的清醒文案：“人不能太閑，閑久了，努力一下就以為自己在拼命”，這不就是我嘛，這不就是你嘛?。。?br>

好了進入正題，這篇文章利用javascript實現(xiàn)盒子往返移動的特效，繼續(xù)往下看吧。

一、HTML布局

實現(xiàn)設計好相關需要的區(qū)域，html布局如下：

1、盒子和盒子移動區(qū)域

2、開始移動和停止移動按鈕區(qū)域

布局核心html代碼如下：

二、CSS樣式

因為主要是為了練習一下javascript的代碼，html布局的樣式信息怎么方便怎么來，樣式如下：

加完樣式信息后的布局如下圖：

三、Javascript特效

1、獲取相關標簽對象：開始移動按鈕對象，停止移動按鈕對象，移動的盒子div標簽對象，盒子移動區(qū)域標簽對象。

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、設置相關參數(shù)機器2默認值或初始值:盒子移動的速度、定時器、盒子移動的像素。

3、為開始移動按鈕標簽對象設置鼠標響應事件。 點擊該按鈕時，盒子開始時以設置的movespeed速度左右移動，即盒子到達邊界時會往反方向移動。

4、為開始移動按鈕標簽對象設置鼠標響應事件。 點擊該按鈕時，清空定時器，使盒子不再移動。

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

B站視頻網(wǎng)址：www.bilibili.com/video/BV1Yb…