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

利用JS定时器做一个元素做一个有移动效果的方法，实现思路：首先声明一个变量存放元素距离左侧的边距，然后我们在声明一个变量存放每次元素需要移动的距离，然后再给这个方法一个完成时间就可以了。需要注意的是获取到的值如果不是数值型的数据需要装换，否则不能进行判断。再判断一下该元素移动到某个位置之后，步长给它一个负值，该元素就会往回跑了。

大家还可以想一想元素移动到左右侧的时候如何实现转身效果。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}
   body{position: relative;}
   #box{
    width: 120px;height: 120px;background: green;
    position: absolute;top: 100px;
    /* 此处可以引入一个背景图作为移动的目标, */
    /* background: url(img/paobu_huaban.png) 0 0/100% 100%; */
   }
  </style>
 </head>
 <body>
  <button type="button" id="Button">点我移动</button>
  <div id="box" style="left: 0px;"></div>

  <script type="text/javascript">
   var Button = document.getElementById("Button");
   var box = document.getElementById("box");
   // 每次移动多少像素，step表示步长
   var step = 5;
   Button.onclick = function(){

    var timer = setInterval(function(){

     //获取box的left值,转成整数，一定要转化为数值行在做运算，
     // parseInt表示将获取到的字符串转化为字符型
     var o_left = parseInt(box.style.left);
     //想要元素走的更快可以改变加大每次移动的距离或者是减少完成时间也可以
    //但是减少完成时间这样的效果要好一点
     var n_left = o_left+step; //每次向右移动10px
     box.style.left = n_left+"px";
     if ( n_left>500) { //如果移动的距离大于400px就往回跑
      step = -5;
     }else if(n_left==0){
      step = 5;
     };
    },100);
   };

  </script>
 </body>
</html>

运行结果如下：

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

赞 (0)

相关推荐

  • JavaScript定时器实现限时秒杀功能

    JavaScript定时器实现限时秒杀功能

    本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 文件index.html 代码: <!DOCTYPE html> <html> <head> <meta charset="GBK" /> <title>show</title> <link rel="stylesheet" href="css/index.css" type=

  • JavaScript定时器实现无缝滚动图片

    JavaScript定时器实现无缝滚动图片

    本文实例为大家分享了JavaScript实现无缝滚动图片的具体代码,供大家参考,具体内容如下 文本: setInterval 开启间隔型定时器 clearTimeout 关闭定时器 offsetWidth 获取宽度 offsetLeft 获取向左偏移量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝移动<

  • js实现鼠标切换图片（无定时器）

    本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下 实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应图片的标题. 全部代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

  • js实现0ms延时定时器的几种方式

    目录 queueMicrotask async/await MessageChannel 最后 附录 这两天看到一篇介绍<如何实现准时的 setTimeout?>的文章,文章起源于一道面试题:有什么办法让setTimeout准时呀?具体文章内容可查看附录[1],看完之后,引起了我对setTimeout这个函数的探究兴趣,因此在MDN上重新查阅了相关文档,其中提到[最小延时 >=4ms]的一点,因此使用setTimeout不能实现0ms延时的定时器,如果要实现的话,提供了一个参考链接[2]

  • JavaScript 定时器详情

    目录 1.简单介绍 2.setInterval 2.1 描述 2.2 参数 2.3 返回值 2.4 用法 3.setTimeout 3.1 描述 3.2 参数 3.3 用法 4.取消timer 5.在控制台使用定时器 1.简单介绍 在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法. 这都是window的对象,调用时可以省略window.这两个方法并不在 JavaScript 的规范中. 定时器方法相关方法有四种: 方法 描述

  • 解决js中的setInterval清空定时器不管用问题

    使用场景:我在函数A中调用定时器函数,定时器是单独写的一个函数 原因:页面加载时我调用了1次函数A,然后又单独调用了一次定时器函数,导致调用了2次setInterval(),导致有setInterval_id有2个值. 通过打印定时器的值发现的问题. clearInterval()只关闭了其中一个setInterval_id,另一个setInterval_id还会启动setInterval(). 解决方法:把单独调用的定时器函数去掉. 补充知识:js vue中setTimeout无法通过clea

  • JS定时器如何实现提交成功提示功能

    应用场景: 用户评论后,在合适位置弹出"评论成功",2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" style="display: none; margin-left: 300px"> <div class="popup" > <p style="color: red; font-size: 16px">

  • js定时器出现第一次延迟的原因及解决方法

    我们在使用js定时器,经常会出现间隔几秒获取一次数据,这是通过setInterval实现的.而且如果setInterval() 参数传递不当,定时器会延迟试行.本文向大家介绍js定时器第一次延迟的原理及实现过程. setInterval() 作用是在播放动画的时,每隔一定时间就调用函数.方法或对象. 语法 setInterval(function(),time); 单位是毫秒 注意:单位是毫秒 定时器第一次延迟执行:采用setInterval实现 var t = setInterval(scro

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

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

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

  • 获取焦点时,利用js定时器设定时间执行动作

    进入正题,先说说定时器. 在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime); 2.循环定时器:timename=setInterval("function();",delaytime); 第一个参数"function()"是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用":"隔开即可.比

  • 利用js查找数组中指定元素并返回该元素的所有索引示例

    前言 这篇文章主要给大家介绍的是利用js查找数组中指定元素并返回该元素的所有索引的相关资料,文中给出了详细的示例代码,下面话不多说,来看看详细的代码示例吧. 示例代码 //在数组中查找所有出现的x,并返回一个包含匹配索引的数组 function findall(a,x){ var results=[], len=a.length, pos=0; while(pos<len){ pos=a.indexOf(x,pos); if(pos===-1){//未找到就退出循环完成搜索 break; } r

  • JS实现利用闭包判断Dom元素和滚动条的方向示例

    本文实例讲述了JS实现利用闭包判断Dom元素和滚动条的方向.分享给大家供大家参考,具体如下: 一.判断滚动条的方向,利用闭包首先保存滚动条的位置,然后当滚动时候不断更新滚动初始值,然后通过差指判断方向 function scroll(fn) { //利用闭包判断滚动条滚动的方向 var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; window.addEventListener("scroll"

  • 利用JS判断元素是否为数组的方法示例

    利用JS判断元素是否为数组的方法示例

    此处提供可供验证的数据类型 let a = [1,2,3,4,5,6]; let b = [ {name: '张飞', type: 'tank'}, {name: '关羽', type: 'soldier'}, {name: '刘备', type: 'shooter'}, ]; let c = 123; let d = 'www'; let e = {name: '安琪拉', type: 'mage'}; 1.通过Array.isArray() Array.isArray()能判断一个元素是否为

  • 利用JS十分钟判断数组中存在元素的多种方式

    前言 在前端开发中,经常会遇到要判断数组中是否存在某个元素.其实判断的方式有很多种,我们一个一个来了解下. 我们先来定义一个数组: const arr = [ 13, false, 'abcd', undefined, 13, null, NaN, [1, 2], { a: 123 }, () => Date.now(), new Date('2021/03/04'), new RegExp('abc', 'ig'), Symbol('sym'), ]; 在这个数组中,我们包含了好几种类型:nu

  • 如何利用JS检查元素是否在视口内

    如何利用JS检查元素是否在视口内

    前言 分享两个监测元素是否在视口内的方法 1. 位置计算 使用 Element.getBoundingClientRect() 方法返回元素相对于视口的位置 const isElementVisible = (el) => { const rect = el.getBoundingClientRect(); }; 获取浏览器窗口的宽高 const isElementVisible = (el) => { const rect = el.getBoundingClientRect(); cons

  • 利用JS对iframe父子（内外）页面进行操作的方法教程

    利用JS对iframe父子（内外）页面进行操作的方法教程

    本文主要给大家介绍了关于利用JS对iframe父子(内外)页面进行操作的方法,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.获取iframe里的内容 在开始之前,首先我们来看看如何获取iframe里的内容,获取iframe中内容主要的两个API就是contentWindow,和contentDocument iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取iframe的document对象 这两个API

  • 利用JS实现点击按钮后图片自动切换的简单方法

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html

  • 利用js读取动态网站从服务器端返回的数据

    在html中利用js读取动态网站从服务器端返回的数据进行显示 1.js.html 页面 需要引入 执行jquery的js文件 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator"

随机推荐