匀速滚动/缓动

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .bdiv{
        width: 100px;
        height: 100px;
        margin-top: 100px;
        margin-left: 0;
        background-color: darkgoldenrod;
    }

</style>

<button id="btn">滚动</button>
<button id="stop">停止</button>
<div id="box" class="bdiv"></div>
</body>

<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var stop = document.getElementById("stop");
    var timer = null;
    var num = 0;
    btn.onclick = function () {
        timer = setInterval(function () {
            num++;
            num<=500 ? num: num=0;
            box.style.marginLeft = num+"px";
        },3)
    };            //匀速滑动

 /*btn.onclick = function () {
    timer = setInterval(function () {
        num = num+(targ-num)/50;
        box.style.marginLeft = num+"px";
    },30)
 }*/    //缓动效果

    stop.onclick = function () {
        clearInterval(timer);
    };
</script>