定时器的应用盒子的移动

2023-12-29 08:21:04

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<style type="text/css">
  #box1{
   width: 100px;
   height: 100px;
   background-color: red;
   position: absolute;
   left: 0px;
  }
</style>
<script type="text/javascript">
  window.onload=function(){
   //获取btn按钮
   var btn = document.getElementById('btn');
   //获取box盒子
   var box =document.getElementById('box1');
   //定义一个变量,用来保存定时器标识
   var timer;
   //给btn按钮绑定一个事件处理函数
   //点击按钮以后，box1向右移动（left)增大
   btn.onclick=function(){
   //关闭一个定时器
   clearInterval(timer);
   //开启一个定时器，用来执行动画效果
    timer=setInterval(function(){
    //获取box1的原来的left值
     var oldValue = parseInt(getstyle(box1,'left'));
     //在原来的基础上增加
     var newValue = oldValue+10;
     //判断newValue是否等于800
     if(newValue>800){
      newValue=800;
     }
     //将新值设置给box1
     box1.style.left=newValue+'px';
     //当元素移动到800使，使其停止动画
     if(newValue===800){
      //达到目标，关闭定时器
      clearInterval(timer);
     }
    },15);
   }

   function getstyle(obj,name){
    if(window.getComputedStyle){
     return getComputedStyle(obj,null)[name];
    }else{
     return obj.currentStyle[name];
    }

   }
  }
</script>
<body>
  <button id="btn">向右移动</button>
  <br />
  <br />
  <div id="box1"></div>
</body>
</html>

码农公寓

相关文章