2021-04-15 js进阶08

论坛 › 期权论坛 › 编程之家     
选择匿名的用户   2021-5-21 09:35   11   0

1.秒杀功能

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      display: flex;
      width: 200px;
      height: 100px;
      background-color: tomato;
      padding: 40px;
      border-radius: 4px;
      font-size: 40px;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="h">00</div>
    <div>:</div>
    <div class="m">01</div>
    <div>:</div>
    <div class="s">01</div>
  </div>
</body>
<script>
  /*    
    目标：
    倒计时：每隔一秒让秒数-1
            当秒小于0 让分钟变成59 小时-1
            当时  分 秒 都为0 停止


    步骤： 1.获取元素
          2.获取元素的文本
          3.定时器
          让秒 -1
          判断 秒<0
          变成59
          判断 分钟< 0
          变成59 小时-1
          如果都是0 停止

 */
  // 1.获取元素
  var hh = document.querySelector('.h')
  var mm = document.querySelector('.m')
  var ss = document.querySelector('.s')

  // 2.获取元素里面的文本
  var h = parseInt(hh.innerText);
  var m = parseInt(mm.innerText)
  var s = parseInt(ss.innerText)

  // 3.定时器
  var timer = setInterval(function () {
    if (h === 0 && m === 0 && s === 0) {
      clearInterval(timer);
      return;
    }
    s--;
    s < 0 ? (m--, (s = 59)) : "";
    m < 0 ? ((m = 59), h--) : "";

    // 把数字修改回去
    ss.innerText = s < 10 ? "0" + s : s;
    mm.innerText = m < 10 ? "0" + m : m;
    hh.innerText = h < 10 ? "0" + h : h;


  }, 1000)
</script>

</html>

2.位移轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 800px;
      margin: 100px auto;
      overflow: hidden;
    }

    .imgs {
      width: 600%;
      display: flex;
    }

    .ani {
      transition: transform 400ms;
    }

    img {
      width: 800px;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul class="imgs ani">
      <li>
        <a href="">
          <img src="./images/45984126f7e43ea93f556ea880adca06.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/573de537b5c805f9c93f6526445cc7b2.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/5c3f383dac7a3b1f5ab8c58a00d56489.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/b0634b59221cfd322a65050930299b72.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/dda219f5a53e1f48fa6a2b72459a4420.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/45984126f7e43ea93f556ea880adca06.jpg" alt="" />
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
  /* 
     目标:轮播图轮到最后一张的时候,继续向左移动  出现 "第一张"

     解决: 1.把真正的第一张图复制一份 放在最后 把ul的宽度改为600%
            2.当第六张动画结束的时候 立刻切换到真正的第一张
       */
  //    1.获取元素
  var imgs = document.querySelector('.imgs')
  console.log(imgs);
  var current = 0;
  //  定时器每隔三秒 向左移动

  var timer = setInterval(function () {
    // current++;
    // if(current>imgs.children.length-1){
    //   current = 0;
    // }

    current = ++current % imgs.children.length;

    // ul 的位置 当前图片* -800
    var target = current * -800;
    imgs.style.transform = 'translateX(' + target + 'px)';
  }, 1000);

  // 解决无缝滚动的问题

  imgs.addEventListener('transitionend',function(){
    if(current === imgs.children.length-1){
      // 首先需要去掉动画样式 ani
      imgs.classList.remove('ani');

      // 让ul立刻变成第一张图
      imgs.style.transform = 'translatex(0)';

      // 同步 current
      current = 0;

      // 稍等一下在加载动画效果
      setTimeout(function(){
        imgs.classList.add('ani');
      },10);
    }
  });
</script>

</html>

3.位移轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 800px;
      margin: 100px auto;
      overflow: hidden;
    }

    .imgs {
      width: 500%;
      display: flex;
      transition: transform 200ms;
    }

    img {
      width: 800px;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul class="imgs">
      <li>
        <a href="">
          <img src="./images/45984126f7e43ea93f556ea880adca06.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/573de537b5c805f9c93f6526445cc7b2.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/5c3f383dac7a3b1f5ab8c58a00d56489.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/b0634b59221cfd322a65050930299b72.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/dda219f5a53e1f48fa6a2b72459a4420.jpg" alt="" />
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
  /* 
      目标:每隔3秒向左移动
        transform:translateX(-n px)

        控制ul的位置
      
       */
  // 1.获取元素
  var imgs = document.querySelector('.imgs');
  console.log(imgs);

  var current = 0; //当前是第几张图

  // 定时器 每隔3秒 向左移动
  var timer = setInterval(function () {
    //current++;
    // if(current>imgs.children.length){
    //   current=0;
    // }

    current = ++current % imgs.children.length;

    //ul的位置 当前图片 * -800
    var target = current * -800;
    imgs.style.transform = 'translateX(' + target + 'px)';
  }, 3000);
</script>

</html>

4.小圆点位移轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 800px;
      margin: 100px auto;
      overflow: hidden;
      position: relative;
    }

    .imgs {
      width: 600%;
      display: flex;
    }

    .ani {
      transition: transform 400ms;
    }

    img {
      width: 800px;
    }

    .dots {
      position: absolute;
      left: 40px;
      bottom: 80px;
    }

    .dots-container {
      display: flex;
    }

    .dots-container i {
      background-color: rgba(255, 255, 255, 0.85);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .dots-container .active {
      box-shadow: 0 0 4px 2px #f00;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul class="imgs ani">
      <li>
        <a href="">
          <img src="./images/45984126f7e43ea93f556ea880adca06.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/573de537b5c805f9c93f6526445cc7b2.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/5c3f383dac7a3b1f5ab8c58a00d56489.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/b0634b59221cfd322a65050930299b72.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/dda219f5a53e1f48fa6a2b72459a4420.jpg" alt="" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/45984126f7e43ea93f556ea880adca06.jpg" alt="" />
        </a>
      </li>
    </ul>
    <div class="dots">
      <div class="dots-container">
        <i class="active"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
  </div>
</body>
<script>
  //  目标：实现对应的圆点
  //  鼠标移动到圆点上，立刻切换对应的图片
  //  图片自动轮播的时候小圆点页对应要变

  //  步骤：

  //  1.小圆点的结构
  //  2.获取元素 注册鼠标 移入事件
  //  3.让ul到达我指定得我位置 展示对应的图片
  //  4.处理图片自动轮播的时候 小圆点对应跟着变化

  window.onload = function () {

    var dots = document.querySelectorAll(".dots-container i");
    console.log(dots);
    var imgWidth = document.querySelector(".imgs img").offsetWidth;
    console.log(imgWidth);
    //注册事件
    dots.forEach(function (e, i) {
      // e代表i标签 i索引 0 1 2 3 4
      e.addEventListener("mouseenter", function () {
        // 位置 索引* -图片宽度
        var target = -imgWidth * i;
        //图片位移到指定的位置
        imgs.style.transform = "translateX(" + target + "px)";
        //处理小圆点的样式
        dots.forEach(function (dot) {
          dot.classList.remove("active");
        });
        //然后把当前的加上样式
        this.classList.add("active");
        //同步索引
        current = i;
      });
    });

    // 处理轮播图自动的时候小圆点的样式

    //    1.获取元素
    var imgs = document.querySelector(".imgs");
    // console.log(imgs);
    var current = 0; //当前是第几张图
    // 定时器 每隔3秒 向左移动
    var timer = setInterval(function () {
      //   current++;
      //   if (current > imgs.children.length-1) {
      //     current = 0;
      //   }
      current = ++current % imgs.children.length;

      // ul的位置 当前图片* -800
      var target = current * -imgWidth;

      imgs.style.transform = "translateX(" + target + "px)";
      console.log(imgs.style.transform);
      dots.forEach(function (e) {
        e.classList.remove("active");
      });
      //找到对应的点变红
      // 给用户一个假象  最后一张图 其实就是第一张图 走到最后一张图的时候  让第一个小圆圈变红
      if (current === imgs.children.length - 1) {
        dots[0].classList.add("active");
      } else {
        dots[current].classList.add("active");
      }
    }, 2000);

    // 解决无缝滚动的问题
    imgs.addEventListener("transitionend", function () {
      if (current === imgs.children.length - 1) {
        //首先需要去掉动画样式  ani
        imgs.classList.remove("ani");
        // 让ul立刻变成第一张图
        imgs.style.transform = "translateX(0)";
        // 同步current
        current = 0;

        //稍等一下在加动画效果
        setTimeout(function () {
          imgs.classList.add("ani");
        }, 10);
      }
    });
  };
</script>

</html>

4.offset.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        border: 10px solid #f0f;
        height: 210px;
        width: 200px;
        background-color: tomato;
        padding: 20px;
        margin-top: 4px;
      }
    </style>
  </head>
  <body>
    <style>
      .yeye {
        width: 400px;
        height: 400px;
        background-color: lawngreen;
        position: relative;
      }
      .baba {
        width: 300px;
        height: 300px;
        background-color: tomato;
        margin-left: 100px;
      }
      .erzi {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin-left: 100px;
      }
    </style>
    <div class="box"></div>
    <div class="yeye">
      <div class="baba">
        <div class="erzi"></div>
      </div>
    </div>
  </body>
  <script>
    /* 
      如果你想获得一个盒子的宽高  padding+border+content
      element.offsetWidth  
      element.offsetHeight 

     */
    var box = document.querySelector(".box");
    console.log(box.offsetWidth);
    console.log(box.offsetHeight);

    // element.offsetParent
    // 1.返回离我最近的定位的前代元素
    // 2.body
    var yeye = document.querySelector(".yeye");
    var baba = document.querySelector(".baba");
    var erzi = document.querySelector(".erzi");
    console.log(yeye.offsetParent);
    console.log(baba.offsetParent);
    console.log(erzi.offsetParent);

    // offsetLeft 得到相对于某个前代元素的左边的偏移
    console.log(yeye.offsetLeft);
    console.log(baba.offsetLeft);
    console.log(erzi.offsetLeft);

    // // offsetTop 得到相对于某个前代元素的顶部的偏移
    console.log(yeye.offsetTop);
  </script>
</html>

5.定时器动画

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: cyan;
        position: absolute;
        top: 100px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
  <script>
    /* 
    
    以前没有css3属性 就需要使用定时器实现动画 
    动画的原理: 让一个物体在微小的时间内.发生微小的位移或者形变

    步骤:首先盒子元素 慢慢地从左边到右边
    思路: 盒子每隔20ms 向右边移动1px
    
    */

    // 1.获取元素
    var box = document.querySelector(".box");
    var timer = setInterval(function () {
      // 获取原来的位置
      var current = box.offsetLeft;
      current += 10;
      //修改left属性
      box.style.left = current + "px";
      //   距离左边900px的时候就停止
      if (current >= 900) {
        clearInterval(timer);
      }
    }, 20);
  </script>
</html>

6.向左向右定时器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: cyan;
        position: absolute;
        top: 100px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <input type="button" value="向右" id="btn1" />
    <input type="button" value="向左" id="btn2" />
    <div class="box"></div>
  </body>
  <script>
    /* 
    
    以前没有css3属性 就需要使用定时器实现动画 
    动画的原理: 让一个物体在微小的时间内.发生微小的位移或者形变

    步骤:首先盒子元素 慢慢地从左边到右边
    思路: 盒子每隔20ms 向右边移动1px
    
    */

    // 1.获取元素
    var box = document.querySelector(".box");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    //向右
    btn1.onclick = function () {
      var timer = setInterval(function () {
        // 获取原来的位置
        var current = box.offsetLeft;
        current += 10;
        //修改left属性
        box.style.left = current + "px";
        //   距离左边900px的时候就停止
        if (current >= 900) {
          clearInterval(timer);
        }
      }, 20);
    };
    // 向左
    btn2.onclick = function () {
      var timer = setInterval(function () {
        // 获取原来的位置
        var current = box.offsetLeft; //只读的
        current -= 10;
        //修改left属性
        box.style.left = current + "px";
        //   距离左边900px的时候就停止
        if (current <= 100) {
          clearInterval(timer);
        }
      }, 20);
    };
  </script>
</html>

7.封装动画函数实现向左向右

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box,
      .box2 {
        width: 100px;
        height: 100px;
        background-color: cyan;
        position: absolute;
        top: 100px;
        left: 100px;
      }
      .box2 {
        top: 300px;
        background-color: lawngreen;
      }
    </style>
  </head>
  <body>
    <input type="button" value="向右" id="btn1" />
    <input type="button" value="向左" id="btn2" />
    <div class="box"></div>
    <div class="box2"></div>
  </body>
  <script>
    /* 
    
    让动画的代码执行 
    分析:参数
    1.元素对象 element
    2.每步要走多远 step
    3.目标位置   target
    */
    var timer = null;
    function animate(element, target, step) {
      clearInterval(element.timer);
      var step = step || 10;

      element.timer = setInterval(function () {
        //得到当前的位置
        var current = element.offsetLeft;
        // current  只能 +  或者 -
        // if(current<target){
        //   // 向右
        //   current +=step;
        // } else{
        //   current -=step;
        // }
        // 可以简化
        // current<target?current+=step:curren-=step;
        current += current < target ? step : -step;
        // 修改位置
        element.style.left = current + "px";
        // 到达目标就停止
        // 如果currenthe target之间的差 小于等于step
        console.log(step);
        if (Math.abs(target - current) <= step) {
          element.style.left = target + "px";
          clearInterval(element.timer);
        }
      }, 20);
    }
    // 1.获取元素
    var box = document.querySelector(".box");
    var box2 = document.querySelector(".box2");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    //向右
    btn1.onclick = function () {
      // animate(box, 900);
      animate(box2, 600);
    };
    // 向左
    btn2.onclick = function () {
      // animate(box, 100);
      animate(box2, 100);
    };
  </script>
</html>

回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16级独孤
选择匿名的用户

积分:3875789
帖子:775174
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP