html5把盒子向下移动,js实现盒子移动动画效果

本文实例为大家分享了js实现盒子移动动画效果的具体代码，供大家参考，具体内容如下

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

.box {

width: 200px;

height: 200px;

border: 1px solid red;

position: absolute;

left: 0;

top: 50px;

}

let boxStart = document.getElementById("box_start");

let boxStop = document.getElementById("box_stop");

let boxBack = document.getElementById("box_back");

let timeId_1;

let timeId_2;

boxStart.onclick = function () {

let box = document.getElementById("box");

clearInterval(timeId_2);

timeId_1 = setInterval(function () {

if (box.offsetLeft >= 600) {

clearInterval(timeId_1);

box