js | 移动盒子

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

今日的小demo是实现一个盒子，用到的是js中的定时器，当然css3中的动画也很方便，不与写js就可直接设置动画效果

整体html结构，比较简单

<div id="div"></div>
<button>点击开始</button>
<button>点击停止</button>

• 实现图

让盒子在浏览器宽度范围内来回移动

• CSS3

先用css3来实现动画效果，其中的animation属性很方便

<style>
    body {
        margin: 0;
        padding: 0;
    }
    #div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        animation: mobile 4s linear 0s infinite alternate ;
    }
    @keyframes mobile {
        from{
                margin-left: 0%;
        }
        to{
                margin-left: 93%;
        }
    }
</style>

• js

先分析一下我们需要做哪些步骤

1. 基本第一步都是获取所用到的节点

var div = document.getElementById('div');
var button = document.getElementsByTagName('button')

2. 我们是想要点击开始，和停止按钮来控制盒子移动，这就需要我们对这两个按钮各自绑定click事件

button[0].onclick = function() {}    //开始
button[1].onclick = function() {}    //停止

3. 点击开始事件盒子开始移动，想不停移动，这就需要我们设置一个速度和一个定时器来帮助我们几秒调用一次。

button[0].onclick = function() {
    let speed = 6;
    if (timer == null) {
        timer = setInterval(() => {
            num += speed;                // 设置速度,每次累加变成移动多少px	
            div.style.left = num + 'px';   // 每次移动多少px
            //如果大于屏幕或小于屏幕宽度
            if (num >= document.body.offsetWidth - div.offsetWidth || num <= 0) {
                    speed = -speed;   //速度取反
            }
            }, 100);
     }
}

4. 停止按钮就简单一点，直接清除定时器任务

button[1].onclick = function() {
    clearInterval(timer);
    timer = null;
}