您的位置：首页 > 编程学习 > > 正文

js定时器几分钟执行（利用JS定时器实现元素移动）

更多时间：2022-03-29 03:48:44 类别：编程学习浏览量：171

js定时器几分钟执行

利用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.jpg" alt="js定时器几分钟执行（利用JS定时器实现元素移动）" border="0" />

运行结果如下：

js定时器几分钟执行（利用JS定时器实现元素移动）

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

标签：js 定时器移动

上一篇：Tomcat和Weblogic部署纯html文件过程解析（Tomcat和Weblogic部署纯html文件过程解析）

下一篇：react动态创建菜单并实现局部刷新（使用react-virtualized实现图片动态高度长列表的问题）

您可能感兴趣

js定时器几分钟执行（利用JS定时器实现元素移动）

js定时器几分钟执行

热门推荐

排行榜