JS实现给不同元素设置不同的定时器

本文实例为大家分享了JS实现给不同元素设置不同的定时器，供大家参考，具体内容如下

案例效果：

上面的紫色盒子打开页面会自己移动到300px，点击上面的按钮，粉色的span才会移动，并且移动到200px。

注意：需要给定时器单独命名，如果都写在同一个封装函数里面的话，每次都会开辟一个定时器的空间，这样就会造成资源浪费，所以直接采用给对象添加定时器属性的方式来节约空间。同时要注意，在设置定时器之前要清除掉这个对象的定时器属性，因为如果不清除的话，当连续按下按钮的时候就会又开启一个定时器这样下面那个span就会越跑越快。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            top: 50px;
            width: 200px;
            height: 200px;
            background-color: violet;
        }
        
        span {
            position: absolute;
            left: 0;
            top: 270px;
            display: block;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
 
</head>
 
<body>
    <button>点击这个按钮span才移动</button>
    <div></div>
    <span>sy is sy</span>
    <script>
        // 动画函数
        // obj代表是哪个对象，target代表移动的距离
        function move(obj, target) {
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = window.setInterval(function() {
                if (obj.offsetLeft >= target) {
                    window.clearInterval(obj.timer);
                } else {
                    obj.style.left = obj.offsetLeft + 1 + 'px';
                }
            }, 30);
        }
 
        var div = document.querySelector('div')
        var span = document.querySelector('span')
        var btn = document.querySelector('button')
        move(div, 300);
 
        btn.addEventListener('click', function() {
            move(span, 200);
        })
    </script>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 利用JS定时器实现元素移动

    利用JS定时器实现元素移动

    利用JS定时器做一个元素做一个有移动效果的方法,实现思路:首先声明一个变量存放元素距离左侧的边距,然后我们在声明一个变量存放每次元素需要移动的距离,然后再给这个方法一个完成时间就可以了.需要注意的是获取到的值如果不是数值型的数据需要装换,否则不能进行判断.再判断一下该元素移动到某个位置之后,步长给它一个负值,该元素就会往回跑了. 大家还可以想一想元素移动到左右侧的时候如何实现转身效果. <!DOCTYPE html> <html> <head> <meta cha

  • JS实现给不同元素设置不同的定时器

    JS实现给不同元素设置不同的定时器

    本文实例为大家分享了JS实现给不同元素设置不同的定时器,供大家参考,具体内容如下 案例效果: 上面的紫色盒子打开页面会自己移动到300px,点击上面的按钮,粉色的span才会移动,并且移动到200px. 注意:需要给定时器单独命名,如果都写在同一个封装函数里面的话,每次都会开辟一个定时器的空间,这样就会造成资源浪费,所以直接采用给对象添加定时器属性的方式来节约空间.同时要注意,在设置定时器之前要清除掉这个对象的定时器属性,因为如果不清除的话,当连续按下按钮的时候就会又开启一个定时器这样下面那个s

  • 给before和after伪元素设置js效果的方法

    给before和after伪元素设置js效果的方法

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是"伪元素". 前面的话 无法直接给before和after伪元素设置js效果 例子说明 现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀",颜色为红色的伪类) <!DOCTYPE html> <html l

  • 用js动态添加html元素,以及属性的简单实例

    用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2.style.height='10px'; lswt_2.style.top='0px'; lswt_2.style.right='0px'; lswt_2.st

  • js判断iframe中元素是否存在的实现代码

    本文章来给大家介绍js判断iframe中元素是否存在代码,有需要了解的朋友可进入参考. 一.纯原生态js实现方法,代码如下: <script> var bb = document.getElementById('PreviewArea').contentWindow.document.getElementById('aPic'); if( bb ) { } else { } //apic为子页面Preview.aspx里面元素的Id </script> <body> &

  • JS获取浮动(float)元素的style.left值为空的快速解决办法

    解决办法: 1.使用行内样式设置元素的top和left值; 2.or直接获取元素的offsetLeft得到相关数值,还不需要parseInt 问题原因: 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLe

  • 可以给img元素设置背景图

    可以给img元素设置背景图

    实现方法很简单:设置 img 元素为块元素(display:block;),并赋一个 padding 值. Image Demo div { background: url('http://img.jb51.net/images/blur.jpg') no-repeat top left; width: 232px; height: 200px; } img { display: block; background: url('http://img.jb51.net/images/paralla

  • JS简单获得节点元素的方法示例

    本文实例讲述了JS简单获得节点元素的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS几种获得节点元素的方法</title> <script type="application/javascript">

  • 通过js动态创建标签,并设置属性方法

    当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个div的事例: <script> function fun(){ var frameDiv = document.createElement("div");//创建一个标签 var bodyFa = document.getElementById("bodyid&quo

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • 微前端之 js隔离 样式隔离 元素隔离问题详解

    微前端之 js隔离 样式隔离 元素隔离问题详解

    目录 WebComponent 介绍 js隔离 问题 解决 方法一用 Proxy 代理 方法二 用快照 样式隔离 问题 方法一 样式增加不同前缀 方法二 ShadawDom 元素隔离 WebComponent 介绍 微前端框架中,js隔离.样式隔离.元素隔离是必须解决的三个问题,下面我们就来分别说说这三个问题是什么?怎么解决? 涉及的核心点是 Proxy,WebComponent,shadowDOM WebComponent 不在这三个问题中,但是我们做个简单介绍 浏览器默认的标签有 div,a

随机推荐