请输入关键字进行搜索...

程序员鸡皮

文章 分类 评论
60 3 9
联系我
the theme is by @冷文学习者

站点介绍

一名PHP全栈程序员的日常......

重学Javascript基础（十一) DOM阶段实战案例

abzzp 2024-10-09 140 0条评论 前端 JavaScript

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......

发布于2024-07-04

01.window中的定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="out">取消setTimeout定时器</button>
    <button class="itv">取消setInterval定时器</button>
    <script>
        // 1.setTimeout
        function foo(name,age,height){
            console.log("foo被调用----",name,age,height)
        }
        var timeoutID = setTimeout(foo,3000,"why",18,1.88);

        var timeoutBtn = document.querySelector(".out") 
        timeoutBtn.onclick = function(){
            // 取消调度
            clearTimeout(timeoutID)
        }

        // 2.setInterval
        // function bar(){
        //     console.log("bar被调用++++")
        // }

        // var itvID = setInterval(bar,3000)

        // var itvBtn = document.querySelector(".itv")
        // itvBtn.onclick = function(){
        //     clearInterval(itvID)
        // }
    </script>
</body>
</html>

02.案例实战-消息滚动切换

<!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>
        .tip-bar{
            display: inline-flex;
            align-items: center;
            height: 30px;
            background-color: rgba(0,0,0,.4);
            border-radius: 16px;
        }
        img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 5px;
        }
        span {
            font-size: 13px;
            color: white;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="tip-bar">
        <img src="https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png" alt="">
        <span>183***138对这件商品感兴趣</span>
    </div>

    <script>
        // 1.从服务器拿到数据ajax/fetch请求
        let tipList = [
            {
                icon: 'https://bfs.biyao.com/group1/M01/A6/97/rBACYWBCHqyAFH5tAAANZXX5Eww646.png',
                title: 'coderwhy对这件商品感兴趣'
            },
            {
                icon: 'https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png',
                title: '123***814对这件商品感兴趣'
            },
            {
                icon: 'https://bfs.biyao.com/group1/M00/7F/4E/rBACYV16HseAP-PnAAAW9bbVoKE463.png',
                title: '刘军对这件商品感兴趣'
            }
        ]

        // 2.动态的切换数据
        // 2.1 获取元素
        var tipBar = document.querySelector(".tip-bar")
        var imgEl = tipBar.querySelector("img")
        var spanEl = tipBar.querySelector("span")

        // 2.2 3s切换一次数据
        var currentIndex = 0; // 记录当前展示到的索引位置
        setInterval(function(){
            // 1.根据索引获取item
            var tipItem = tipList[currentIndex]
            // 2.给DOM设置内容
            imgEl.src = tipItem.icon
            spanEl.textContent = tipItem.title

            // 3.重新计算索引
            currentIndex++
            if(currentIndex === tipList.length){
                currentIndex = 0
            }
        },3000)

        // 随机
        // Math.floor(Math.random() * tipList.length)
    </script>
</body>
</html>

03.案例实战-m站头部关闭

<!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>
        .top-bar {
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 45px;
          width: 375px;
          background-color: black;
          /* 关键 */
          overflow: hidden;
          transition: all .5s ease-out;
        }
        .delete {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 100%;
          width: 30px;
          cursor: pointer;
        }
        .delete img {
          height: 10px;
          width: 10px;
        }
        .logo {
          height: 30px;
          width: 30px;
          margin-left:3px;
          margin-right: 30px;
          cursor: pointer;
        }
        span {
          color: white;
          font-size: 14px;
          flex: 1;
    
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .btn {
          width: 94px;
          height: 100%;
          line-height: 45px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          background-color: #F63515;
        }
      </style>
</head>
<body>
    <div class="top-bar">
        <div class="delete">
          <img src="./img/delete.png" alt="">
        </div>
        <img class="logo" src="./img/logo.png" alt="">
        <span>打开京东App,购物更轻松</span>
        <div class="btn">立即打开</div>
      </div>
    <script>
        // 1.获取元素
        var topBar = document.querySelector(".top-bar")
        var deleteEl = topBar.querySelector(".delete")

        // 2.监听delete的点击
        deleteEl.onclick = function(){
            topBar.style.height = 0
            // setTimeout(() => {
            //     topBar.remove()
            // }, 300);
        }

        // 3.监听过渡动画结束
        // topBar.ontransitionend = function(){
        //     topBar.remove()
        // }
    </script>
</body>
</html>

04.案例实战-侧边栏的展示

<!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>
        .tool-bar {
            position: fixed;
            top: 30%;
            right: 0;

            display: flex;
            flex-direction: column;
            align-items: center;

            width: 35px;
        }

        .item {
            position: relative;
            width: 35px;
            height: 35px;
            margin-bottom: 1px;
            
            background-color: #7a6e6e;
            border-radius: 3px 0 0 3px;
        }

        .icon {
            display: inline-block;
            width: 100%;
            height: 100%;
            cursor: pointer;
            background-image: url(./img/toolbars.png);
        }

            /* .icon01 {
            background-position: -48px 0;
            }
            .icon02 {
            background-position: -48px -50px;
            }
            .icon03 {
            background-position: -48px -100px;
            }
            .icon04 {
            background-position: -48px -150px;
            } */

        .name {
            position: absolute;
            z-index: -1;
            right: 35px;
            /* left: -62px; */
            top: 0;
            
            width: 0;
            height: 35px;
            line-height: 35px;

            color: #fff;
            text-align: center;
            font-size: 12px;
            background-color: #7a6e6e;
            cursor: pointer;

            border-radius: 3px 0 0 3px;
            transition: width .2s ease;
        }

        .item:hover,.item:hover .name {
            background-color: #cd1926;
        }
    </style>
</head>
<body>
    <div class="tool-bar">
        <div class="item">
          <i class="icon icon01"></i>
          <div class="name">购物车</div>
        </div>
        <div class="item">
          <i class="icon icon02"></i>
          <div class="name">收藏</div>
        </div>
        <div class="item">
          <i class="icon icon03"></i>
          <div class="name">限时活动</div>
        </div>
        <div class="item">
          <i class="icon icon04"></i>
          <div class="name">大礼包</div>
        </div>
      </div>
    
    <script>
        // 1.动态给icon设置backgroundPosition
        var iconEls = document.querySelectorAll(".icon")
        for(var i = 0;i < iconEls.length; i++){
            var iconEl = iconEls[i]
            iconEl.style.backgroundPosition =  `-48px -${50*i}px`
        }

        // 2.实现鼠标进入动画
        // 方案一：mouseenter（不能使用事件委托）
        var itemEls = document.querySelectorAll(".item")
        for(var itemEl of itemEls){
            itemEl.onmouseenter = function(){
                var nameEl = this.children[1]
                nameEl.style.width = "62px"
            }
            itemEl.onmouseleave = function(){
                var nameEl = this.children[1]
                nameEl.style.width = "0"
            }
        }

    </script>
</body>
</html>

05.案例实战-侧边栏的展示(禁止事件)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tool-bar {
      position: fixed;
      top: 30%;
      right: 0;

      /* display: flex;
      flex-direction: column;
      align-items: center; */

      width: 35px;
    }

    .item {
      position: relative;
      float: right;
      width: 35px;
      height: 35px;
      margin-bottom: 1px;
      
      background-color: #7a6e6e;
      border-radius: 3px 0 0 3px;
    }

    .icon {
      position: absolute;
      right: 0;
      top: 0;
      width: 35px;
      height: 35px;
      cursor: pointer;
      background-image: url(./img/toolbars.png);
      
      /* 禁止鼠标交互 */
      pointer-events: none;
    }

    /* .icon01 {
      background-position: -48px 0;
    }
    .icon02 {
      background-position: -48px -50px;
    }
    .icon03 {
      background-position: -48px -100px;
    }
    .icon04 {
      background-position: -48px -150px;
    } */

    .name {
      position: absolute;
      z-index: -1;
      right: 35px;
      top: 0;
      
      width: 0;
      height: 35px;
      line-height: 35px;

      color: #fff;
      text-align: center;
      font-size: 12px;
      background-color: #7a6e6e;
      cursor: pointer;

      border-radius: 3px 0 0 3px;
      transition: width .2s ease;

      /* 禁止鼠标交互 */
      pointer-events: none;
    }

    .item:hover,
    .item:hover .name {
      background-color: #cd1926;
    }
  </style>
</head>
<body>
  
  <div class="tool-bar">
    <div class="item">
      <i class="icon icon01"></i>
      <div class="name">购物车</div>
    </div>
    <div class="item">
      <i class="icon icon02"></i>
      <div class="name">收藏</div>
    </div>
    <div class="item">
      <i class="icon icon03"></i>
      <div class="name">限时活动</div>
    </div>
    <div class="item">
      <i class="icon icon04"></i>
      <div class="name">大礼包</div>
    </div>
  </div>

  <script>
    // 1.动态给icon设置backgroundPosition
    var iconEls = document.querySelectorAll(".icon")
    for (var i = 0; i < iconEls.length; i++) {
      var iconEl = iconEls[i]
      iconEl.style.backgroundPosition = `-48px -${50*i}px`
    }

    // 2.实现鼠标进入动画
    var toolbarEl = document.querySelector(".tool-bar")
    toolbarEl.onmouseover = function(event) {
      var nameEl = event.target.children[1]
      nameEl.style.width = "62px"
      event.target.style.width = `${62 + 35}px`
    }
    toolbarEl.onmouseout = function(event) {
      var nameEl = event.target.children[1]
      nameEl.style.width = "0"
      event.target.style.width = `${35}px`
    }

  </script>

</body>
</html>

06.案例实战-tabControl切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀-main-news</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <style>
        .main .section-content {
        display: flex;
        justify-content: space-between;
        }

        .main .section-content .left-content {
        width: 872px;
        height: 1000px;
        }
        .main .section-content .right-content {
        width: 295px;
        height: 500px;
        }
    </style>
</head>
<body>
    <div class="main main_wrapper">
        <div class="section-content">
          <div class="left-content">
            <div class="content-center">
              <div class="section_header">
                <div class="header_left">
                  <h3 class="title">内容中心</h3>
                </div>
                <div class="header_right" href="#">
                  <a class="more" href="#">更多</a>
                </div>
              </div>
              <div class="tab_control">
                <div class="item active">精品栏目</div>
                <div class="line"></div>
                <div class="item">赛事精品</div>
                <div class="line"></div>
                <div class="item">英雄攻略</div>
              </div>
            </div>
        </div>
      </div>

      <script>
        // 1.获取元素
        var tabControl = document.querySelector(".tab_control")

        // 2.监听鼠标进入（事件委托）
        var activeLiEl = tabControl.querySelector(".active")
        tabControl.onmouseover = function(event){
            // 1.拿到事件发生的对象
            var itemEl = event.target
            if(itemEl.classList.contains("item")){
                // 其他的取消active
                // 1.for循环所有的item
                // 2.querySelector(".active")
                // 3.记录当前的active对应的item
                activeLiEl.classList.remove("active")

                // 当前进入的item变成active
                itemEl.classList.add("active")

                // 将最新的itemEl变成activeLiEl
                activeLiEl = itemEl
            }
        }
      </script>
</body>
</html>

07.案例实战-王者轮播-基本实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
    }

    .news-section .banner {
      width: 605px;
      background-color: #000;
      overflow: hidden;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      /* overflow: hidden; */
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      font-size: 14px;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      background-color: purple;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
    <div class="main main_wrapper">
        <div class="news-section">
          <div class="banner">
            <ul class="image-list">
              <li class="item">
                <a href="">
                  <img src="./img/banner_01.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_02.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_03.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_04.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_05.jpeg" alt="">
                </a>
              </li>
            </ul>
            <ul class="title-list">
              <li class="item active">
                <a href="#">桑启的旅途故事</a>
              </li>
              <li class="item">
                <a href="#">启示之音抢先听</a>
              </li>
              <li class="item">
                <a href="#">谁成为版本之子</a>
              </li>
              <li class="item">
                <a href="#">观赛体验升级</a>
              </li>
              <li class="item">
                <a href="#">季后赛开战</a>
              </li>
            </ul>
          </div>
          <div class="news"></div>
          <div class="download">
            <a class="download-btn" href="#"></a>
            <a class="guard-btn" href="#"></a>
            <a class="experience-btn" href="#"></a>
          </div>
        </div>
      </div>

      <script>
        // 1.获取元素
        var titleListEl = document.querySelector(".title-list")
        var activeItemEl = document.querySelector(".active")

        var imageListEl = document.querySelector(".image-list")

        // 2.底部titles的切换,同时进行轮播
        titleListEl.onmouseover = function(event){
            // 1.1 确定发生鼠标进入的元素
            var itemEl = event.target.parentElement
            if(!itemEl.classList.contains("item")) return

            // 1.2 移除之前的active
            activeItemEl.classList.remove("active")

            // 1.3 将active添加到鼠标进入的元素
            itemEl.classList.add("active")

            // 1.4 让activeItemEl指向最新的元素
            activeItemEl = itemEl

            // 1.5 移动对应的imageListEl
            // 1.5.1 获取itemEl所在的索引
            // for(var i = 0;i< titleListEl.children.length;i++){
            //     if(titleListEl.children[i] === itemEl) break
            // }

            var index = Array.from(titleListEl.children).findIndex(function(item){
                return item === itemEl
            })

            imageListEl.style.transform = `translateX(${-604 * index}px)`
            imageListEl.style.transition = `all 300ms ease`
        }
      </script>
</body>
</html>

08.案例实战-王者轮播-添加定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
    }

    .news-section .banner {
      width: 605px;
      background-color: #000;
      overflow: hidden;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      /* overflow: hidden; */
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      font-size: 14px;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      background-color: purple;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
    <div class="main main_wrapper">
        <div class="news-section">
          <div class="banner">
            <ul class="image-list">
              <li class="item">
                <a href="">
                  <img src="./img/banner_01.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_02.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_03.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_04.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_05.jpeg" alt="">
                </a>
              </li>
            </ul>
            <ul class="title-list">
              <li class="item active">
                <a href="#">桑启的旅途故事</a>
              </li>
              <li class="item">
                <a href="#">启示之音抢先听</a>
              </li>
              <li class="item">
                <a href="#">谁成为版本之子</a>
              </li>
              <li class="item">
                <a href="#">观赛体验升级</a>
              </li>
              <li class="item">
                <a href="#">季后赛开战</a>
              </li>
            </ul>
          </div>
          <div class="news"></div>
          <div class="download">
            <a class="download-btn" href="#"></a>
            <a class="guard-btn" href="#"></a>
            <a class="experience-btn" href="#"></a>
          </div>
        </div>
      </div>

      <script>
        // 1.获取元素
        var titleListEl = document.querySelector(".title-list")
        var imageListEl = document.querySelector(".image-list")

        // 定义变量保存一些状态
        var activeItemEl = document.querySelector(".active")
        var currentIndex = 0

        // 2.底部titles的切换，同时进行轮播
        titleListEl.onmouseover = function(event){
            // 1.1确定发生鼠标进入的元素
            var itemEl = event.targe.parentElement;
            if(!itemEl.classList.contains("item")) return

            // 1.2移除之前的active
            activeItemEl.classList.remove("active")

            // 1.3将active添加到鼠标进入的元素
            itemEl.classList.add("active")

            // 1.4让activeItemEl指向最新的元素
            activeItemEl = itemEl

            // 1.5移动对应的imageListEl
            var index = Array.from(titleListEl.children).findIndex(function(item){
                return item === itemEl
            })

            imageListEl.style.transform = `translateX(${-604 * index}px)`
            imageListEl.style.transform = `all 300ms ease`

            currentIndex = index
        }

        // 3.定时器：定时轮播
        setInterval(function(){
            currentIndex++
            if(currentIndex === titleListEl.children.length){
                currentIndex = 0
            }

            imageListEl.style.transform = `translateX(${-604 * currentIndex}px)`
            imageListEl.style.transform = `all 300ms ease`

            // 处理titles中的li的active
            // 1.移除之前的active
            activeItemEl.classList.remove("active")

            // 2.添加新的active
            var currentItemEl = titleListEl.children[currentIndex]
            currentIndex.classList.add("active")

            // 3.记录新的activeLi
            activeItemEl = currentItemEl
        },3000);
      </script>
</body>
</html>

09.案例实战-王者轮播-代码的重构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
    }

    .news-section .banner {
      width: 605px;
      background-color: #000;
      overflow: hidden;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      /* overflow: hidden; */
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      font-size: 14px;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      background-color: purple;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
    <div class="main main_wrapper">
        <div class="news-section">
          <div class="banner">
            <ul class="image-list">
              <li class="item">
                <a href="">
                  <img src="./img/banner_01.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_02.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_03.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_04.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_05.jpeg" alt="">
                </a>
              </li>
            </ul>
            <ul class="title-list">
              <li class="item active">
                <a href="#">桑启的旅途故事</a>
              </li>
              <li class="item">
                <a href="#">启示之音抢先听</a>
              </li>
              <li class="item">
                <a href="#">谁成为版本之子</a>
              </li>
              <li class="item">
                <a href="#">观赛体验升级</a>
              </li>
              <li class="item">
                <a href="#">季后赛开战</a>
              </li>
            </ul>
          </div>
          <div class="news"></div>
          <div class="download">
            <a class="download-btn" href="#"></a>
            <a class="guard-btn" href="#"></a>
            <a class="experience-btn" href="#"></a>
          </div>
        </div>
      </div>
    <script>
        // 1.获取元素
        var titleListEl = document.querySelector(".title-list")
        var imageListEl = document.querySelector(".image-list")

        // 定义变量保存一些的状态
        var activeItemEl = document.querySelector(".active")
        var currentIndex = 0

        // 2.底部titles的切换,同时进行轮播
        titleListEl.onmouseover = function(event){
            // 1.1 确定发生鼠标移入的元素
            var itemEl = event.target.parentElement
            if(!itemEl.classList.contains("item")) return

            // 1.2 获取对应的索引index
            var index = Array.from(titleListEl.children).findIndex(function(item){
                return item === itemEl
            })
            currentIndex = index

            // 1.3调用切换的函数
            switchBanner()
        }

        // 3.定时器：定时轮播
        setInterval(function(){
            currentIndex++
            if(currentIndex === titleListEl.children.length){
                currentIndex = 0
            }

            // 调用切换的函数
            switchBanner()
        },3000);

        // 封装一个切换轮播的函数
        function switchBanner(){
            // 第一件事情：让imageListEl滚动
            // 1.1 让imageListEl修改transform
            imageListEl.style.transform = `translateX(${-604 * currentIndex}px)`
            imageListEl.style.transition = `all 300ms ease`

            // 第二件事情：改变title选中
            // 1.2 移除之前的active
            activeItemEl.classList.remove("active")

            // 1.3 将active添加到鼠标进入的元素
            var currentItemEl = titleListEl.children[currentIndex]
            currentItemEl.classList.add("active")

            // 1.4 让activeItemEl指向最新的元素
            activeItemEl = currentItemEl
        }
    </script>
</body>
</html>

10.案例实战-王者轮播-移除定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
    }

    .news-section .banner {
      width: 605px;
      background-color: #000;
      overflow: hidden;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      /* overflow: hidden; */
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      font-size: 14px;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      background-color: purple;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
    <div class="main main_wrapper">
        <div class="news-section">
          <div class="banner">
            <ul class="image-list">
              <li class="item">
                <a href="">
                  <img src="./img/banner_01.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_02.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_03.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_04.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_05.jpeg" alt="">
                </a>
              </li>
            </ul>
            <ul class="title-list">
              <li class="item active">
                <a href="#">桑启的旅途故事</a>
              </li>
              <li class="item">
                <a href="#">启示之音抢先听</a>
              </li>
              <li class="item">
                <a href="#">谁成为版本之子</a>
              </li>
              <li class="item">
                <a href="#">观赛体验升级</a>
              </li>
              <li class="item">
                <a href="#">季后赛开战</a>
              </li>
            </ul>
          </div>
          <div class="news"></div>
          <div class="download">
            <a class="download-btn" href="#"></a>
            <a class="guard-btn" href="#"></a>
            <a class="experience-btn" href="#"></a>
          </div>
        </div>
      </div>
      
      <script>
        // 1.获取元素
        var titleListEl = document.querySelector(".title-list")
        var imageListEl = document.querySelector(".image-list")
        var bannerEl = document.querySelector(".banner")

        // 定义变量保存一些的状态
        var activeItemEl = document.querySelector(".active")
        var currentIndex = 0
        var timerID = null

        // 2.底部titles的切换，同时进行轮播
        titleListEl.onmouseover = function(event){
            // 1.1确定发生鼠标移入的元素
            var itemEl = event.target.parentElement;
            if(!itemEl.classList.contains("item")) return

            // 1.2获取对应的索引index
            var index = Array.from(titleListEl.children).findIndex(function(item){
                return item === itemEl
            })
            currentIndex = index

            // 1.3调用切换的函数
            switchBanner()
        }

        // 3.定时器：定时轮播
        startTimer()

        // 监听banner的事件
        bannerEl.onmouseover = function(){
            clearInterval(timerID)
        }
        bannerEl.onmouseleave = function(){
            startTimer()
        }

        // 封装一个切换轮播的函数
        function switchBanner(){
            // 第一件事情：让imageListEl滚动
            // 1.1 让imageListEl修改transform
            imageListEl.style.transform = `translateX(${-604 * currentIndex}px)`
            imageListEl.style.transform = `all 300ms ease`

            // 第二件事情：改变title选中
            // 1.2移除之前的active
            activeItemEl.classList.remove("active")

            // 1.3将active添加到鼠标进入的元素
            var currentItemEl = titleListEl.children[currentIndex]
            currentItemEl.classList.add("active")

            // 1.4 让activeItemEl指向最新的元素
            activeItemEl = currentItemEl
        }

        // 封装一个添加定时器的函数
        function startTimer(){
            timerID = setInterval(function(){
                currentIndex++
                if(currentIndex === titleListEl.children.length){
                    currentIndex = 0
                }

                // 调用切换的函数
                switchBanner()
            },3000);
        }
      </script>
</body>
</html>

11.案例实战-王者轮播-默认的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
    }

    .news-section .banner {
      width: 605px;
      background-color: #000;
      overflow: hidden;
    }

    .news-section .banner .image-list {
      position: relative;
      display: flex;
      width: 604px;
      height: 298px;
    }

    .news-section .banner .image-list .item {
      position: absolute;
      left: 100%;
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item:first-child {
      left: 0;
      transition: left 300ms ease;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      font-size: 14px;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      background-color: purple;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
    <div class="main main_wrapper">
        <div class="news-section">
          <div class="banner">
            <ul class="image-list">
              <li class="item">
                <a href="">
                  <img src="./img/banner_01.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_02.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_03.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_04.jpeg" alt="">
                </a>
              </li>
              <li class="item">
                <a href="">
                  <img src="./img/banner_05.jpeg" alt="">
                </a>
              </li>
            </ul>
            <ul class="title-list">
              <li class="item active">
                <a href="#">桑启的旅途故事</a>
              </li>
              <li class="item">
                <a href="#">启示之音抢先听</a>
              </li>
              <li class="item">
                <a href="#">谁成为版本之子</a>
              </li>
              <li class="item">
                <a href="#">观赛体验升级</a>
              </li>
              <li class="item">
                <a href="#">季后赛开战</a>
              </li>
            </ul>
          </div>
          <div class="news"></div>
          <div class="download">
            <a class="download-btn" href="#"></a>
            <a class="guard-btn" href="#"></a>
            <a class="experience-btn" href="#"></a>
          </div>
        </div>
      </div>

      <script>
        // 1.获取元素
        var titleListEl = document.querySelector(".title-list")
        var imageListEl = document.querySelector(".image-list")
        var bannerEl = document.querySelector(".banner")

        // 定义变量保存一些的状态
        var activeTitleEl = titleListEl.querySelector(".active")
        var currentIndex = 0
        var previousIndex = 0
        var timerID = null

        // 2.底部titles的切换,同时进行轮播
        titleListEl.onmouseover = function(event){
            // 1.1 确定发生鼠标移入的元素
            var itemEl = event.target.parentElement
            if(!itemEl.classList.contains("item")) return

            // 1.2获取对应的索引index
            var index = Array.from(titleListEl.children).findIndex(function(item){
                return item === itemEl
            })
            previousIndex = currentIndex
            currentIndex = index

            // 1.3调用切换的函数
            switchBanner()
        }

        // 3.定时器：定时轮播
        startTimer()

        // 监听banner的事件
        bannerEl.onmouseenter = function(){
            clearInterval(timerID)
        }
        bannerEl.onmouseleave = function(){
            startTimer()
        }

        // 封装一个切换轮播的函数
        function switchBanner(){
            // 第一件事情：让imageListEl滚动
            // 1.1 让imageListEl修改transform
            // 其他内容需要调整
            for(var i = 0;i<imageListEl.children.length;i++){
                var itemEl = imageListEl.children[i]

                if(i === currentIndex){
                    // 当前要展示的imageItem
                    itemEl.style.transition = "left 300ms ease"
                    itemEl.style.left = "0"
                }else if(i < currentIndex){
                    // 需要放在左侧的imageItem
                    if(i !== previousIndex){
                        itemEl.style.transition = "none"
                    }
                    itemEl.style.left = "-100%"
                } else {
                    // 需要放到右侧的imageItem
                    if(i !== previousIndex){
                        itemEl.style.transition = "none"
                    }
                    itemEl.style.left = "100%"
                }
            }

            // 第二件事情：改变title选中
            // 1.2移除之前的active
            activeTitleEl.classList.remove("active")

            // 1.3将active添加到鼠标进入的元素
            var currentItemEl = titleListEl.children[currentIndex]
            currentItemEl.classList.add("active")

            // 1.4 让activeItemEl指向最新的元素
            activeTitleEl = currentItemEl
        }

        // 封装一个添加定时器的函数
        function  startTimer(){
            timerID = setInterval(function(){
                previousIndex = currentIndex
                currentIndex++
                if(currentIndex === titleListEl.children.length){
                    currentIndex = 0
                }

                // 调用切换的函数
                switchBanner()
            },3000)
        }
      </script>
</body>
</html>

12.案例实战-购物车-基本搭建

<!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>
        table {
          border-collapse: collapse;
        }
    
        thead {
          background-color: #f5f5f5;
        }
    
        th, td {
          border: 1px solid #aaa;
          padding: 8px 12px;
          text-align: center;
        }
      </style>
</head>
<body>
    <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <h2 class="price">
        总价格: ¥<span class="price-count">0</span>
    </h2>

    <script>
        // 1.从服务器获取数据ajax/fetch
        var books = [
        {
            id: 1,
            name: '《算法导论》',
            date: '2006-09',
            price: 85.00,
            count: 3
        },
        {
            id: 2,
            name: '《UNIX编程艺术》',
            date: '2006-02',
            price: 59.00,
            count: 2
        },
        {
            id: 3,
            name: '《编程珠玑》',
            date: '2008-10',
            price: 39.00,
            count: 5
        },
        {
            id: 4,
            name: '《代码大全》',
            date: '2006-03',
            price: 128.00,
            count: 8
        }
        ]

        // 2.对数据展示
        // 到底通过html直接编写,还是通过JavascripDOM操作创建元素
        // 1.对于固定的，直接通过html编写（能通过html编写，尽量通过html直接编写)
        // 2.对于那些大量的数据，有规律的数据，可以通过javascript编写
        var tbodyEl = document.querySelector("tbody")

        // 2.2 动态添加tr以及内部数据
        for(var i = 0;i<books.length;i++){
            var trowEl = document.createElement("tr")
            // 2.3 放具体数据
            var  book = books[i]
            var bookKeys = Object.keys(book)
            for(var m = 0;m < bookKeys.length;m++){
                var key = bookKeys[m]
                var value = book[key]
                var tdEl = document.createElement("td")
                if(key === "price"){
                    value = "￥"+value
                }
                tdEl.textContent = value
                trowEl.append(tdEl)
            }

            // 2.4 添加删除按钮
            var deleteTdEl = document.createElement("td")
            var deleteBtnEl = document.createElement("button")
            deleteBtnEl.textContent = "删除"
            deleteTdEl.append(deleteBtnEl)
            trowEl.append(deleteTdEl)

            tbodyEl.append(trowEl)
        }

        // 3.计算总价格
        var priceCountEl = document.querySelector(".price-count")
        var totalPrice = 0
        // for(var i = 0;i<books.length;i++){
        //     totalPrice += books[i].count * books[i].price
        // }
        var totalPrice = books.reduce(function(preValue,item){
            return preValue + item.count * item.price
        },0)
        priceCountEl.textContent = totalPrice
    </script>

</body>
</html>

13_案例实战-购物车-删除操作

<!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>
        table {
          border-collapse: collapse;
        }
    
        thead {
          background-color: #f5f5f5;
        }
    
        th, td {
          border: 1px solid #aaa;
          padding: 8px 12px;
          text-align: center;
        }
      </style>
</head>
<body>
    <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <h2 class="price">
        总价格: ¥<span class="price-count">0</span>
      </h2>
      <script>
        // 1.从服务器获取数据 ajax/fetch
    var books = [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-09',
        price: 85.00,
        count: 3
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-02',
        price: 59.00,
        count: 2
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 5
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-03',
        price: 128.00,
        count: 8
      }
    ]

    // 2.对数据展示
    // 到底通过html直接编写, 还是通过JavaScriptDOM操作创建元素
    // 1> 对于固定的, 直接通过html编写(能通过html编写, 尽量通过html直接编写)
    // 2> 对于哪些大量的数据, 有规律的数据, 可以通过JavaScript编写
    var tbodyEl = document.querySelector("tbody")

    // 2.2 动态添加tr以及内部数据
    for(var i = 0;i<books.length;i++){
        var trowEl = document.createElement("tr")

        // 2.3放具体数据
        var book = books[i]
        var bookKeys = Object.keys(book)
        for(var m = 0;m<bookKeys.length;m++){
            var key = bookKeys[m]
            var value = book[key]
            var tdEl = document.createElement("td")
            if(key === "price"){
                value = "¥" + value
            }
            tdEl.textContent = value
            trowEl.append(tdEl)
        }

        // 2.4添加删除按钮
        var deleteTdEl = document.createElement("td")
        var deleteBtnEl = document.createElement("button")
        deleteBtnEl.textContent = "删除"
        deleteTdEl.append(deleteBtnEl)
        trowEl.append(deleteTdEl)

        // 2.5 监听删除按钮的点击
        deleteBtnEl.onclick = function(){
            // 1.删除对应的trow
            var deleteTRowEl = this.parentElement.parentElement
            var deleteTrIndex = deleteBtnEl.sectionRowIndex
            deleteTRowEl.remove()

            // 2.删除对应books中的数据
            books.splice(deleteTrIndex,1)

            // 3.重新计算一次价格
            calcTotalPrice()
        }
        tbodyEl.append(trowEl)
    }

    // 3.计算总价格
    var priceCountEl = document.querySelector(".price-count")
    calcTotalPrice()

    // 封装计算价格的函数
    function calcTotalPrice(){
        var totalPrice = books.reduce(function(preValue,item){
            return preValue + item.count * item.price
        },0)
        priceCountEl.textContent = totalPrice
    }
      </script>
</body>
</html>

感谢大家观看,我们下次见

版权所属: abzzp
本文链接: https://xvzhu.cn/archives/56.html
协议授权: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》
下一篇 上一篇

评论(0)

最新评论

  • abzzp

    十天看一部剧，还可以吧[[呲牙]]

  • ab

    @梦不见的梦 行，谢谢提醒,我优化一下

  • 梦不见的梦

    网站的速度有待提升，每次打开都要转半天还进不来呢

  • abzzp

    @React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了，报错了吗？[[微笑]]

  • abzzp

    @Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品[[发呆]]

  • Teacher Du

    我们大学那会，献血还给学分~

  • 夜

    @ab 我想去学网安，比如网警，但分也贼高😕

  • ab

    @夜 加油，你一样也可以成为程序员的，需要学习资料可以V我

  • 夜

    佬发布的好多技术文章似乎我只能评论这篇，真正的程序员！！哇塞 我也想去献血，过两年就成年了可以去献血了

日历

2024年11月

日一二三四五六
     12
3456789
10111213141516
17181920212223
24252627282930

标签云

vue JavaScript React Golang 观后感 ES6 读后感

友情链接

云烟博客 boys博客 白雾茫茫丶 时光日志

文章目录

推荐关键字： vue JavaScript React Golang 观后感 ES6 读后感

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......
点击小铃铛关闭
配色方案
高贵黑
默认配色
墨蓝色
优雅白