当前位置:编程学习 > > 正文

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

时间:2022-03-29 03:48:44类别:编程学习

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定时器实现元素移动)

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

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐