定时器让元素移动功能

最新推荐文章于 2022-07-01 10:43:15 发布

江呱呱

最新推荐文章于 2022-07-01 10:43:15 发布

阅读量275

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108264793

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

定时器让元素移动功能

<!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 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button id="begin">开始</button>
    <button id="stop">停止</button>
    <div id="move"></div>
    <script>
        var begin = document.querySelector("#begin");
        var stop = document.querySelector("#stop");
        var move = document.querySelector("#move");
        var juli = 50;//设置第一次移动的距离
        var time;//设置获取定时器值的变量
        begin.addEventListener('click', function() {
            console.log(1);
            clearInterval(time);//每次设置一个新的定时器的时候  先清除上一个定时器  否则就会出现 每点击一次就会加速的效果 这是因为每次点击都设置了一个新的定时器  所以要在每次设置定时器之前都清除上一个定时器
            time = setInterval(() => {
                move.style.left = juli + 'px';
                juli += 50;//每次移动的距离加50
            }, 500);
        })
        stop.addEventListener('click', function() {
            console.log(2);
            clearInterval(time);
        })
    </script>
</body>
</html>

//注：每次用变量去接收定时器的值都会接收到不一样的值比如说第一次接受到的是1 第二次就是2 所以每次设置一个新的定时器就会把之前定时器的值给覆盖过去故而清除定时的时候只能清除那个最新的定时器在之前的定时器是清除不掉的

江呱呱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
定时器让元素移动功能

定时器让元素移动功能<!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> * {
复制链接

扫一扫