8.4定时器学习

LIN861246

已于 2022-08-21 22:37:02 修改

阅读量141

点赞数

CC 4.0 BY-SA版权

文章标签：前端 html

于 2022-08-20 22:44:26 首次发布

本文链接：https://blog.youkuaiyun.com/LIN861/article/details/126445516

这篇博客通过一个实例展示了如何使用JavaScript实现一个盒子元素在页面上动态向右移动的效果。利用定时器`setInterval`控制动画，点击按钮时启动定时器，使盒子向右平移。当盒子移动到指定位置后，自动停止运动。文章还包含了一个获取元素当前样式的辅助函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">

           *{
               margin: 0;
               padding: 0;
           }

           #box1{
               width: 100px;
               height: 100px;
               background-color: red;
               position: absolute;
               left: 0;
           }

       </style>

       <script type="text/javascript">

           window.onload = function(){

               //获取box1
               var box1 = document.getElementById("box1");
               //获取btn01
               var btn01 = document.getElementById("btn01");

               //定义一个变量，用来保存定时器的标识
               var timer;

               //点击按钮以后，使box1向右移动（left值增大）
               btn01.onclick = function(){

                   //关闭上一个定时器
                   clearInterval(timer);

                   //开启一个定时器，用来执行动画效果
                   timer = setInterval(function(){

                       //获取box1的原来的left值
                       var oldValue = parseInt(getStyle(box1,"left"));

                       //在旧值的基础上增加
                       var newValue = oldValue + 1;

                       //判断newValue是否大于800
                       if(newValue > 800){
                           newValue = 800;
                       }

                       //将新值设置给box1
                       box1.style.left = newValue + "px";

                       //当元素移动到800px时，使其停止执行动画
                       if(newValue == 800){
                           //达到目标，关闭定时器
                           clearInterval(timer);
                       }


                   },30);


               };

           };


           /*
           * 定义一个函数，用来获取指定元素的当前的样式
           * 参数：
           *        obj 要获取样式的元素
           *        name 要获取的样式名
           */
           function getStyle(obj , name){

               if(window.getComputedStyle){
                   //正常浏览器的方式，具有getComputedStyle()方法
                   return getComputedStyle(obj , null)[name];
               }else{
                   //IE8的方式，没有getComputedStyle()方法
                   return obj.currentStyle[name];
               }

           }


       </script>
   </head>
   <body>

       <button id="btn01">点击按钮以后box1向右移动</button>

       <br /><br />

       <div id="box1"></div>

       <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>

   </body>
</html>