匀速运动案例

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaya625202/p/9191156.html

文章标签：

#javascript #ViewUI

本文介绍了一种利用JavaScript中的setInterval方法实现元素匀速运动的案例。通过设置定时器，使页面上的方块从初始位置开始水平移动，直至达到预定的距离后隐藏。此过程还演示了如何使用clearInterval来停止动画。

编辑本博客

通过setInterval做动画
动画运动到一定位置需要用clearInterval(inter)将定时器进行清理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匀速运动案例</title>
    <style type="text/css">
        #box{
            position: relative;/*相对定位指相对自己原先的位置*/
            width: 50px;
            height: 50px;
            top: 200px;
            background-color: #A9A9A9;
            }
    </style>
</head>
<body>
    <button id="btn">运动</button>
    <div id="box">
    </div>
</body>
<script type="text/javascript">
    var btn=document.getElementById("btn");
    var box=document.getElementById('box');
    var count=0;
    var inter=null;
    btn.onclick=function (ev) {
        inter=setInterval(function () {
            count++;
            box.style.left=count+'px';
            if(count>1000){
                clearInterval(inter);
                box.style.display='none';
            }
        },10)
    }
</script>
</html>