匀速运动

最新推荐文章于 2022-05-04 18:40:35 发布

python基础教程

最新推荐文章于 2022-05-04 18:40:35 发布

阅读量362

点赞数

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.csdn.net/stopcpp/article/details/52796312

版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 100px;
            left: 0;
        }

    </style>
</head>
<body>
    <button id="btn">开始</button>
    <div id="box"></div>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var num = 0; //距离左侧的值left
    var timer = null; //定时器
    btn.onclick = function () {
        timer = setInterval(function(){
            num++;
            num>=500 ? clearInterval(timer) : box.style.left = num + "px";
        },10);
    }
</script>