<meta name="viewport" content="width=device-width, initial-scale=1.0">Documentvar div = document.querySelector('div');var tinner = setInterval(function () {if (div.offsetLeft > 400) {clearInterval(tinner);
            }
            div.style.left = div.offsetLeft + 1 + 'px'

        }, 30)" _ue_custom_node_="true">

<meta name="viewport" content="width=device-width, initial-scale=1.0">Documenttop: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }" _ue_custom_node_="true">夏雨荷function animate(obj, target) {           var inner = setInterval(function () {               if (obj.offsetLeft >= target) {                   clearInterval(inner)
               }
               obj.style.left = obj.offsetLeft + 1 + 'px'
           },30)
       }       var div = document.querySelector('div');       var span = document.querySelector('span');
       animate(div, 200);
       animate(span, 300);" _ue_custom_node_="true">

<meta name="viewport" content="width=device-width, initial-scale=1.0">Documenttop: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }" _ue_custom_node_="true">点击夏雨荷才走夏雨荷var btn = document.querySelector('button');var div = document.querySelector('div');var span = document.querySelector('span');function move(obj, target) {clearInterval(obj.tinner); // 防止多次点击obj.tinner = setInterval(function () {if (obj.offsetLeft >=target) {clearInterval(tinner)
                }
                obj.style.left = obj.offsetLeft + 1 + 'px'
            },10)
        }
        move(div, 300);

        btn.addEventListener('click', function () {
            move(span,400)
        })" _ue_custom_node_="true">

<meta name="viewport" content="width=device-width, initial-scale=1.0">Documenttop: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }" _ue_custom_node_="true">点击夏雨荷才走夏雨荷// 缓动动画函数封装obj目标对象 target 目标位置// 思路：// 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。// 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长// 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器function animate(obj, target) {// 先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);
            obj.timer = setInterval(function() {// 步长值写到定时器的里面var step = (target - obj.offsetLeft) / 30;if (obj.offsetLeft == target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);
                }// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }var span = document.querySelector('span');var btn = document.querySelector('button');

        btn.addEventListener('click', function() {// 调用函数animate(span, 500);
            })// 匀速动画 就是 盒子是当前的位置 +  固定的值 10 // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）" _ue_custom_node_="true">

<meta name="viewport" content="width=device-width, initial-scale=1.0">Documenttop: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }" _ue_custom_node_="true"><button class="btn500">点击夏雨荷到500<button class="btn800">点击夏雨荷到800夏雨荷function animate(obj, target) {// 清理定时器，防止多次点击clearInterval(obj.timer);

        obj.timer = setInterval(function () {// 把我们步长值改为整数 不要出现小数的问题var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);// 到达目标就清除if (obj.offsetLeft == target) {clearInterval(obj.timer);
            }

            obj.style.left = obj.offsetLeft + step + 'px'

        }, 15);
    }var btn500 = document.querySelector('.btn500');var btn800 = document.querySelector('.btn800');var span = document.querySelector('span');

    btn500.onclick = function () {
        animate(span, 500);
    };

    btn800.onclick = function () {
        animate(span, 800);
    }" _ue_custom_node_="true">

<meta name="viewport" content="width=device-width, initial-scale=1.0">Documenttop: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }" _ue_custom_node_="true"><button class="btn500">点击夏雨荷到500<button class="btn800">点击夏雨荷到800夏雨荷function animate(obj, target, callback) {// 清理定时器，防止多次点击clearInterval(obj.timer);

        obj.timer = setInterval(function () {// 把我们步长值改为整数 不要出现小数的问题var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);// 到达目标就清除if (obj.offsetLeft == target) {clearInterval(obj.timer);// 回调函数if (callback){
                    callback()
                }
            }

            obj.style.left = obj.offsetLeft + step + 'px'

        }, 15);
    }var btn500 = document.querySelector('.btn500');var btn800 = document.querySelector('.btn800');var span = document.querySelector('span');

    btn500.onclick = function () {
        animate(span, 500);
    };

    btn800.onclick = function () {
        animate(span, 800, function () {
            span.style.backgroundColor = 'red';  // 回调函数});
    }" _ue_custom_node_="true">

<meta name="viewport" content="width=device-width, initial-scale=1.0">Documenttop: 0;
            width: 200px;
            height: 40px;
            background-color: purple;
            z-index: -1;
        }" _ue_custom_node_="true"><div class="sliderbar">←<div class="con">问题反馈