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

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

一、HTML布局

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

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

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

布局核心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、獲取相關(guān)標簽對象：開始移動按鈕對象，停止移動按鈕對象，移動的盒子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è)置相關(guān)參數(shù)機器2默認值或初始值:盒子移動的速度、定時器、盒子移動的像素。

let moveSpeed = 10; let timer = null; let num = 0; 復制代碼

3、為開始移動按鈕標簽對象設(shè)置鼠標響應(yīng)事件。 點擊該按鈕時，盒子開始時以設(shè)置的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、為開始移動按鈕標簽對象設(shè)置鼠標響應(yīng)事件。 點擊該按鈕時，清空定時器，使盒子不再移動。

stopBtn.addEventListener('click', () => { ? clearInterval(timer); ? timer = null; }); 復制代碼

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