js 实现匀速移动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 100px;

            height: 100px;

            background-color: red;

            position: absolute;

            left: 0;

            top: 0;

        }

    </style>

</head>

<body>

    <div></div>

    <script>

        var speedx = 3;

        const move = () => {

            var div = window.getComputedStyle(document.getElementsByTagName("div")[0]);

            var tleft = parseInt(div.left);

            var left = speedx + tleft;

            var ttop = parseInt(div.top);

            var top = speedx + ttop;

            document.getElementsByTagName("div")[0].style.left = left + 'px';

            document.getElementsByTagName("div")[0].style.top = top + 'px';

        }

        var mymove = setInterval(() => {

                        move();

                    }, 20);

        setTimeout( () => { //2秒后停止

            clearInterval(mymove);//停止

        } , 2000);

    </script>

</body>

</html>

window.getComputedStyle() 方法的使用

一、getComputedStyle() 用法

document.defaultView.getComputedStyle(element[,pseudo-element]);

或者

window.getComputedStyle(element[,pseudo-element]);

首先是有两个参数，元素和伪类。第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。
使用示例

let my_div = document.getElementById("myDiv");

let style = window.getComputedStyle(my_div, null);

二、返回值

getComputedStyle 返回的对象是 CSSStyleDeclaration 类型的对象。取数据的时候可以直接按照属性的取法去取数据，例如 style.backgroundColor。需要注意的是，返回的对象的键名是 css 的驼峰式写法，background-color -> backgroundColor。

三、和 style 的异同

getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。
而不同点就是：

element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式
我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。

Window setInterval() 方法

定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示： 1000 毫秒= 1 秒。
提示：如果你只想执行一次可以使用 setTimeout() 方法。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法

setInterval(code, milliseconds);

setInterval(function, milliseconds, param1, param2, ...)

参数	描述
code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1, param2, …	可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

使用 setInterval() 和 clearInterval()来创建动态进度条：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>小潘</title>

</head>

<style>

    #myProgress {

        width: 100%;

        height: 30px;

        position: relative;

        background-color: #ddd;

    }

    #myBar {

        background-color: #4CAF50;

        width: 10px;

        height: 30px;

        position: absolute;

    }

</style>

<body>

    <h1>JavaScript 进度条</h1>

    <div id="myProgress">

        <div id="myBar"></div>

    </div>

    <br>

    <button onclick="move()">点我</button>

    <script>

        function move() {`在这里插入代码片`

            var elem = document.getElementById("myBar");

            var width = 0;

            var id = setInterval(frame, 10);

            function frame() {

                if (width == 100) {

                    clearInterval(id);

                } else {

                    width++;

                    elem.style.width = width + '%';

                }

            }

        }

    </script>

</body>

</html>