BOM——操作小案例

最新推荐文章于 2023-09-04 12:06:26 发布

VIP文章云中自有锦书

最新推荐文章于 2023-09-04 12:06:26 发布

阅读量535

点赞数

分类专栏：前端文章标签： BOM

本文链接：https://blog.csdn.net/weixin_41282726/article/details/96603582

版权

1.简单动画封装(使用回调函数)

补充：定时器知识点，打印顺序：1 3 2

 console.log(1);
 setInterval(function(){
   console.log(2);
 },0);
 console.log(3);

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    div{
      width: 100px;
      height: 100px;
      background-color: red;
      position:absolute;
    }
  </style>
</head>
<body>
<button id="btn">点击让box从0移动到400,到达400之后,自动回到0</button>

<div id="box"></div>
<script>
  //1. 点击按钮,让box从0移动到400
  //  给btn注册点击事件,在事件处理函数中,让box的left值缓慢的变成400(在定时器中,获取当前位置,在当前位置的基础上,加几个像素)
  //  1.1  获取元素 btn box
  var btn = document.getElementById('btn');
  var box = document.getElementById('box');
 
  btn.onclick = function(){
    animate(box, 400, 7, function(){
      animate(box, 0, 7);
    });
  }  
//  console.log(1);
//  setTimeout(function(){
//    console.log(2);
//  },0);
//  console.log(3);
  
  //封装 按钮事件处理函数中的代码(让一个元素,从左往右,或者从右往左缓慢移动)
  /*
   * 作用: 让一个元素,从左往右,或者从右往左缓慢移动
   * element: 要求传入一个元素  元素
   * target : 元素移动的目标位置  数字
   * step: 步进(每次元素移动的距离)
   * callback : 回调函数  到达目标位置之后,会被调用
   * */
  
  function animate(element, target, step, callback){

//    清除定时器
    if(element.timeid){
      clearInterval(element.timeid);
    }

//    1. 设置定时器
    element.timeid =  setInterval(function(){
//        2. 获取元素的当前位置
      var current = element.offsetLeft;
//        3. 根据当前位置加上/减去我们的步进
//         如果当前位置大于目标位置,就是减去步进.否则就是加上步进
      if(current > target){
//            证明是从右往左,应该减去step
        var pos = current - step;
      }else{
        // 证明是从左往右,应该加上step
        var pos = current + step;
      }
      
      // 4. 给element赋值新的位置
      element.style.left = pos + 'px';

//          5. 判断是否到达目标位置,如果到达目标位置就停下来
//          5.1 如何判断已经到达目标位置
//              如果 当前位置(赋值之后的位置 pos)- 目标位置 的差值绝对值,小于步进,证明马上要到目标位置了
      if(Math.abs(pos - target) <= step){
        //证明马上就要到达目标位置了
//              5.2  清除定时器,直接把目标位置给元素
        clearInterval(element.timeid);
        element.style.left = target + 'px';
        //判断用户有没有传第四个参数,如果传了就调用,如果没传就不调用
//        如果传入了函数,callback转换成布尔就是true,如果什么都没传,callback转换成布尔,就是false
        if(callback){
          callback();
        }      
      }      
    }, 15);
  }
</script>
</body>
</html>

2.钟表案例

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .clock {
      width: 600px;
      height: 600px;
      margin: 100px auto;
      background: url(images/clock.jpg) no-repeat;
      position: relative;
    }
    
    .clock div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(images/hour.png) no-repeat center center;
    }
    
    #m {
      background-image: url(images/minute.png);
      /*transform: rotate(90deg);*/
    }
    
    #s {
      background-image: url(images/second.png);
      /*让盒子旋转*/
      /* transform: rotate(30deg); */

最低0.47元/天解锁文章

云中自有锦书

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
BOM——操作小案例

1.简单动画封装(使用回调函数)补充：定时器知识点，打印顺序：1 3 2 console.log(1); setInterval(function(){ console.log(2); },0); console.log(3);<!DOCTYPE html><html lang="zh-CN"><head> <met...
复制链接

扫一扫