JavaScript-DOM实战案例

2023-09-17 22:28:46

一、window定时器

1.window定时器方法

有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（scheduling a call）”。

目前有两种方式可以实现：

  • setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。

  • setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。

并且通常情况下有提供对应的取消方法：

  • clearTimeout：取消setTimeout的定时器；
  • clearInterval：取消setInterval的定时器；

大多数运行环境都有内置的调度程序，并且提供了这些方法：

  • 目前来讲，所有浏览器以及 Node.js 都支持这两个方法；
  • 所以我们后续学习Node的时候，也可以在Node中使用它们；

2.setTimeout的使用

setTimeout的语法如下：

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

  • func|code：想要执行的函数或代码字符串。
    • 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做；
  • delay：执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
  • arg1，arg2…：要传入被执行函数（或代码字符串）的参数列表；

clearTimeout方法：

  • setTimeout 在调用时会返回一个“定时器标识符（timer identifier）”，我们可以使用它来取消执行
function showTime() {
    console.log(new Date().toISOString());
    setTimeout("showTime()", 1000);
}
showTime();
// 或者
function showTime() {
    console.log(new Date().toISOString());
    setTimeout(showTime, 1000);
}
showTime();

3.setInterval的使用

setInterval 方法和 setTimeout 的语法相同：

  • 所有参数的意义也是相同的；
  • 不过与 setTimeout 只执行一次不同，setInterval 是每间隔给定的时间周期性执行；

clearInterval方法：

  • setInterval也会返回一个“定时器标识符（timer identifier）”，我们可以通过clearInterval来取消这个定时器。

关于定时器还有一些宏任务相关的概念，我们会在JavaScript高级中讲解。

二、案例实战

1.轮播消息提示

<!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>
    .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>

2.关闭隐藏信息

<!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>
    .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(function() {
      //   topBar.remove()
      // }, 300)
    }

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

  </script>

</body>
</html>

3.侧边栏展示

<!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;
      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"
      }
    }

    // 方案二: mouseover(使用事件委托)
    // var toolbarEl = document.querySelector(".tool-bar")
    // toolbarEl.onmouseover = function(event) {
    //   handleMouseEvent(event, 62)
    // }
    // toolbarEl.onmouseout = function(event) {
    //   handleMouseEvent(event, 0)
    // }

    // function handleMouseEvent(event, width) {
    //   if (event.target !== toolbarEl) {
    //     // var itemEl = event.target.classList.contains("item") ? event.target: event.target.parentElement
    //     // 1.获取唯一的item
    //     var itemEl = null
    //     if (event.target.classList.contains("item")) {
    //       itemEl = event.target
    //     } else {
    //       itemEl = event.target.parentElement
    //     }

    //     // 2.根据item获取nameElement
    //     var nameEl = itemEl.children[1]

    //     // 3.设置宽度
    //     nameEl.style.width = `${width}px`
    //   }
    // }

  </script>

</body>
</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>
  <link rel="stylesheet" href="./css/iconfont.css">
  <style>
    body,input {
      margin: 0;
      padding: 0;
      outline: none;
    }

    .container {
      text-align: center;
    }

    .pannel {
      display: inline-block;
      padding: 30px;
      width: 300px;
      /* border-radius: 10px; */
      /* border: 2px solid #ccc; */
    }

    .pannel .form-item {
      display: flex;
      width: 100%;
      margin-bottom: 15px;
      border: 1px solid #ccc;
    }

    .pannel .form-item .icon {
      width: 40px;
      height: 40px;
      box-sizing: border-box;
      border-right: 1px solid #ccc;
      background-color: #eee;
      vertical-align: bottom;
      color: #ccc;
    }

    .pannel .form-item .icon.icon-account {
      font-size: 24px;
      line-height: 40px;
    }

    .pannel .form-item .icon.icon-password {
      line-height: 40px;
      font-size: 18px;
    }

    .pannel .form-item input {
      padding-left: 10px;
      height: 40px;
      flex: 1;
      box-sizing: border-box;
      border-style: none;
    }

    .pannel .form-item i {
      width: 20px;
      margin: 0 3px;
      font-style: normal;
      color: #ccc;
      line-height: 40px;
      font-size: 20px;
    }

    button {
      width: 100%;
      background-color: rgb(233, 97, 99);
      border-style: none;
      padding: 5px 0;
      font-size: 20px;
      letter-spacing: 5px;
      color: #fff;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="pannel">
      <form action="/abc" method="post">
        <h1>登录页面</h1>
        <div class="form-item">
          <div class="icon iconfont icon-account"></div>
          <input type="text" name="username" id="username" placeholder="邮箱/用户名/登录手机">
          <i class="remove-icon iconfont icon-delete"></i>
        </div>
        <div class="form-item">
          <div class="icon iconfont icon-password"></div>
          <input type="password" name="password" id="password" placeholder="密码">
          <i class="hidden-icon iconfont icon-no_eye"></i>
          <i class="remove-icon iconfont icon-delete"></i>
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
  </div>
  <script>
    var removeIconEls = document.querySelectorAll(".icon-delete");

    removeIconEls.forEach(function (value) {
      console.log(value);
      value.addEventListener("click", function () {
        console.log("当前元素：", this);
        this.previousElementSibling.value = "";
      })
    })
  </script>
</body>
</html>

5.王者荣耀tabControl

<!DOCTYPE html>
<html lang="zh-CN">
<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>王者荣耀-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>

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>
    body {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    .box {
      width: 604px;
      height: 342px;
      margin: 0 auto;
      overflow: hidden;
    }

    .pic {
      display: flex;
      width: 100%;
      height: 298px;
      transition: all 300ms ease;
    }

    .pic .banner {
      flex: 1;
    }

    .btn {
      display: flex;
      height: 44px;
      background-color: #000;
    }

    .btn a {
      flex: 1;
      line-height: 44px;
      font-size: 14px;
      text-align: center;
      color: #b1b2be;
    }

    .btn a.active,
    .btn a:hover {
      color: #f3c258;
      background-color: rgba(255, 255, 255, 0.15);
    }


  </style>
</head>
<body>
  <div class="box">
    <div class="pic">
      <a href="#" class="banner"><img src="./images/banner01.jpeg" alt="海诺设计理念"></a>
      <a href="#" class="banner"><img src="./images/banner02.jpeg" alt="季后赛宣传片"></a>
      <a href="#" class="banner"><img src="./images/banner03.jpeg" alt="KPL选秀招募"></a>
      <a href="#" class="banner"><img src="./images/banner04.jpeg" alt="荣耀大话王"></a>
      <a href="#" class="banner"><img src="./images/banner05.jpeg" alt="虔诚人物志"></a>
    </div>
    <div class="btn">
      <a href="#" class="active">海诺设计理念</a>
      <a href="#">季后赛宣传片</a>
      <a href="#">KPL选秀招募</a>
      <a href="#">荣耀大话王</a>
      <a href="#">虔诚人物志</a>
    </div>
  </div>

  <script>
    // 获取banner
    var boxEl = document.querySelector(".box");
    var picEl = document.querySelector(".pic");
    var btnEl = document.querySelector(".btn");
    var index = 0;
    var activeBtn = document.querySelector(".active");
    // 轮播图
    var bannerTimer = exeBanner();

    // 按钮鼠标切换
    boxEl.onmouseover = function (event) {
      // 暂停轮播
      clearInterval(bannerTimer);
      // 判断是否为按钮，不是则返回
      if (event.target.parentElement !== btnEl ||
      event.target === activeBtn) return;

      //切换按钮激活
      changeActive(event.target);

      // 切换对应的banner
      // 找到当前按钮的index
      index = Array.from(btnEl.children).indexOf(activeBtn);
      picEl.style.transform = `translate(-${604*index}px, 0)`;
    }

    boxEl.onmouseleave = function (event) {
      // 开始轮播
      bannerTimer = exeBanner();
    }

    // 改变激活按钮元素
    function changeActive(activeEl) {
      activeBtn.classList.remove("active");
      activeBtn = activeEl;
      activeBtn.classList.add("active");
    }

    // 执行轮播
    function exeBanner(params) {
      return setInterval(() => {
        // banner图移动
        picEl.style.transform = `translate(-${604*index}px, 0)`;
        // 按钮切换
        changeActive(btnEl.children[index]);
        index++;
        if (index === picEl.children.length) {
          index = 0;
        }
      }, 3000);
    }

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

原版

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

    a {
      text-decoration: none;
    }

    .box {
      width: 604px;
      height: 342px;
      margin: 0 auto;
      overflow: hidden;
    }

    .pic {
      display: flex;
      position: relative;
      width: 100%;
      height: 298px;
      
    }

    .pic .banner {
      position: absolute;
      flex: 1;
      /* transition: all 2000ms ease; */
    }

    .btn {
      display: flex;
      height: 44px;
      background-color: #000;
    }

    .btn a {
      flex: 1;
      line-height: 44px;
      font-size: 14px;
      text-align: center;
      color: #b1b2be;
    }

    .btn a.active,
    .btn a:hover {
      color: #f3c258;
      background-color: rgba(255, 255, 255, 0.15);
    }


  </style>
</head>
<body>
  <div class="box">
    <div class="pic">
      <a href="#" class="banner"><img src="./images/banner01.jpeg" alt="海诺设计理念"></a>
      <a href="#" class="banner"><img src="./images/banner02.jpeg" alt="季后赛宣传片"></a>
      <a href="#" class="banner"><img src="./images/banner03.jpeg" alt="KPL选秀招募"></a>
      <a href="#" class="banner"><img src="./images/banner04.jpeg" alt="荣耀大话王"></a>
      <a href="#" class="banner"><img src="./images/banner05.jpeg" alt="虔诚人物志"></a>
    </div>
    <div class="btn">
      <a href="#" class="active">海诺设计理念</a>
      <a href="#">季后赛宣传片</a>
      <a href="#">KPL选秀招募</a>
      <a href="#">荣耀大话王</a>
      <a href="#">虔诚人物志</a>
    </div>
  </div>

  <script>
    // 获取banner
    var boxEl = document.querySelector(".box");
    var picEl = document.querySelector(".pic");
    var btnEl = document.querySelector(".btn");
    var index = 0;
    var lastIndex = index;
    var activeBtn = document.querySelector(".active");
    // 轮播图
    var bannerTimer = exeBanner();

    // 按钮鼠标切换
    boxEl.onmouseover = function (event) {
      // 暂停轮播
      clearInterval(bannerTimer);
      // 判断是否为按钮，不是则返回
      if (event.target.parentElement !== btnEl ||
      event.target === activeBtn) return;

      //切换按钮激活
      changeActive(event.target);

      // 切换对应的banner
      // 找到当前按钮的index
      lastIndex = index;
      index = Array.from(btnEl.children).indexOf(activeBtn);
      bannerMove();;
    }

    boxEl.onmouseleave = function (event) {
      // 开始轮播
      bannerTimer = exeBanner();
    }

    // 改变激活按钮元素
    function changeActive(activeEl) {
      activeBtn.classList.remove("active");
      activeBtn = activeEl;
      activeBtn.classList.add("active");
    }

    // 执行轮播
    function exeBanner(params) {
      return setInterval(() => {
        // 切换轮播图
        bannerMove();
        // 切换按钮
        changeActive(btnEl.children[index]);
        lastIndex = index;
        index++;
        // 重置index
        if (index === picEl.children.length) {
          index = 0;
        }
        
      }, 3000);
    }

    // 轮播图移动
    function bannerMove() {
      // 给上一张和下一张添加动画
      for (var i = 0; i < picEl.children.length; i++) {
        if (i === lastIndex || i === index) {
          picEl.children[i].style.transition = "all 300ms ease";
          continue;
        }
        picEl.children[i].style.transition = "none";
      }
      
      // banner图移动
      if (index > 0) {
        for (var i = 0; i < index; i++) {
          picEl.children[i].style.left = "-100%";
        }
      }
      if (index === 0) {
        for (var i = 1; i < picEl.children.length; i++) {
          picEl.children[i].style.left = "100%";
        }
      }
      picEl.children[index].style.left = "0%";
        
      if (index < picEl.children.length - 1) {
        for (var i = index+1; i < picEl.children.length; i++) {
          picEl.children[i].style.left = "100%";
        }
      }
    }

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

7.书籍购物车

<!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>
    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 = deleteTRowEl.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>
更多推荐

Django之初入门

一）Django简介1.简介Django是一个开源的PythonWeb框架，它以简洁高效的方式帮助开发者构建复杂的Web应用程序。Django采用了MVC（Model-View-Controller）的架构模式，通过强大的工具和功能，提供了一套完整的解决方案，使开发过程更加简单、快速和可扩展。Django拥有丰富的内置

安科瑞电流隔离传感器 BA穿孔交流电流变送器-安科瑞黄安南

一.产品原理和功能介绍BA系列产品应用电磁感应原理，对电网中的交流电流进行实时测量，采用精密恒流技术和线性温度补偿技术，将其隔离变换为标准的直流信号输出采用24伏或12伏安全电压供电，具有过载能力强、高精度、高隔离、高安全性、低功耗等特点，可广泛用于工业自动化领域。可以选配真有效值，也可以对漏电流进行实时测量.BA系列

Spring IOC 容器：掌握 Spring 的核心技术

Spring是一个非常流行和强大的Java开发框架，它可以帮助我们简化和优化Java项目的开发过程。Spring的核心技术之一就是IOC（InversionofControl，控制反转），它可以实现对象之间的解耦，让对象的创建和管理由Spring容器来完成，而不是由对象自己或使用对象的类来完成。这样可以提高代码的可维护

mysql限制用户登录失败次数,限制时间

mysql用户登录限制设置mysql需要进行用户登录次数限制,当使用密码登录超过3次认证链接失败之后,登录锁住一段时间,禁止登录这里使用的mysql:8.1.0这种方式不用重启数据库.配置:首先进入到mysql命令行:然后需要安装两个插件:在mysql命令行中执行:mysql>INSTALLPLUGINCONNECTI

SpringMvc根据返回值类型不同处理响应

目录一、介绍二、返回值为void（1）控制层方法三、返回值为String（1）控制层四、返回值为ModelAndView（1）控制层方法（2）jsp页面一、介绍我们可以通过控制器方法的返回值设置跳转的视图。控制器支持如void，String，ModelAndView类型。二、返回值为void返回值是void会跳转到名字

“深入理解SpringMVC的JSON数据返回和异常处理机制“

目录引言1.SpringMVC之JSON数据返回1.1导入依赖1.2配置弹簧-MVC.xml1.3@ResponseBody注解使用1.4.Jackson2.异常处理机制2.1为什么要全局异常处理2.2异常处理思路2.3SpringMVC异常分类2.4综合案例总结引言在现代Web开发中，SpringMVC是一个广泛使用

【SpringMVC】自定义注解

🎉🎉欢迎来到我的CSDN主页！🎉🎉🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚🌟在这里，我要推荐给大家我的专栏《SpringMVC》。🎯🎯🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进SpringMVC的世界，让你从零开始，一步步

设计模式：组合模式

目录组件代码实现优缺点源码中应用总结组合模式是一种结构型设计模式，用于将对象组织成树形结构，以表示“部分-整体”的层次结构。组合模式使得客户端可以统一地处理单个对象和组合对象，而不需要区分它们之间的差异。在组合模式中，有两种主要类型的对象：叶节点和组合节点。叶节点表示树结构中的最小单位，它们没有子节点。而组合节点则可以

求生之路2服务器搭建插件安装及详细的游戏参数配置教程linux

求生之路2服务器搭建插件安装及详细的游戏参数配置教程linux大家好我是艾西，在上一篇文章中我用windows系统给搭建演示了一遍怎么搭建自己的L4D2游戏。那么也有不少小伙伴想知道linux系统的搭建方式以及在这个过程中有什么区别。那么艾西今天就跟大家分享下用linux服务器系统搭建求生之路2（注：因PT原因本文中w

我用AI画了几张通信工程师工作照，大家看看像不像？

之前我给大家演示过AI写作。今年，我们玩点新花样，尝试一下AI绘画。我注册了百度的文心一格，打算绘制几幅和通信工程师有关的画，邀请大家一起鉴别一下AI的绘画能力。先来个简单的吧。绘画要求①：一个通信工程师在机房加班。大约十几秒钟，结果出来了——这幅画中规中矩。桌面上摆的终端不知道是啥。手是捏鼠标的姿势，可是鼠标明明就在

新概念英语（第二册）复习——Lesson 11 - Lesson15

前言一套教材，少就是多，别怀疑，别较真，努力去做，怕就怕今天用这个，明天用那个，你学十年不如别人学一年。一共96课，你可以每天1文章目录前言Lesson11-Onegoodturndeservesanother原文译文单词Lesson12-Goodbyeandgoodluck原文译文单词Lesson13-TheGree

热文推荐
  1. 如何通过百度SEO优化提升网站排名（掌握基础概念，实现有效优化）

    随着互联网的发展，搜索引擎优化（SEO）成为了网站优化中不可或缺的一部分。在中国，百度搜索引擎占据着主导地位，因此掌握百度SEO概念和优化技巧对网站的排名和曝光非常重要。百度SEO排名的6个有效方法：首先是关键词研究。通过深入了解目标用户的搜索习惯和需求，选择合适的关键词并进行优化；其次是页面优化，蘑菇号https:/

  2. 初步了解华为的MTL（市场到线索）流程的基本概念和来龙去脉

    前两天，有读者给华研荟发私信，说在学习华为资料的时候看到华为有一个MTL流程，想了解下这个MTL流程和LTC流程有什么区别？既然有了LTC流程，为什么还要MTL流程呢？为此，今天华研荟给大家简要介绍华为的MTL流程，也是非常重要的一个业务流程。如华研荟前面的文章中所提到的，华为认为一个企业运作的主业务主流程就三个：IP

  3. 3-D HANet：一种用于目标检测的柔性三维 HeatMap 辅助网络

    论文背景室外场景感知使用Lidar：1.点云数据不受天气(雾、风暴、雨和雪)的影响，支持稳定的环境感知；2.点云数据在很大程度上保留了原来中物体的空间结构特征。3D目标检测是室外场景感知的重要组成部分。从一个不完整的点云空间结构中学习目标的完整尺寸和准确定位是三维目标检测的关键。空间结构不完整：受传感器、遮挡、物体材质

  4. 华为云云耀云服务器L实例评测｜centos7.9在线使用cloudShell下载rpm解压包安装mysql并开启远程访问

    文章目录⭐前言⭐使用华为cloudShell连接远程服务器💖进入华为云耀服务器控制台💖选择cloudShell⭐安装mysql压缩包💖wget下载💖tar解压💖安装步骤💖初始化数据库💖修改密码💖开启远程账号访问💖安全组开放3306端口💖本地navicat连接⭐总结⭐结束⭐前言大家好，我是yma16，

  5. C++之va_start、vasprintf、va_end应用总结(二百二十六)

    简介：CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀人生格言：人生从来没有捷径，只有行动才是治疗恐惧和懒惰的唯一良药.更多原创,欢迎关注：Android系统攻城狮1.前言本篇目的：C++之

  6. 第33章_瑞萨MCU零基础入门系列教程之DHT11温湿度获取实验

    本教程基于韦东山百问网出的DShanMCU-RA6M5开发板进行编写，需要的同学可以在这里获取：https://item.taobao.com/item.htm?id=728461040949配套资料获取：https://renesas-docs.100ask.net瑞萨MCU零基础入门系列教程汇总：https://b

  7. 【ELFK】之zookeeper

    一、Zookeeper是什么？zooleeper是一个分布式服务管理框架。存储业务服务节点元数据及信息，并复制；通知客户端在zookeeper上注册的服务节点状态，通过文件系统+通知机制1、Zookeeper工作机制Zookeeper从设计模式角度来理解是一个基于观察者模式设计的分布式服务管理框架，它负责存储和管理大家

  8. 8位单片机的优势：永不过时的选择

    被广泛应用于各种智能化设备中，8位单片机以其独特的优势，成为了许多应用场景的首选。为什么它们在今天仍然具有重要的应用价值？一、8位单片机的优势：（1）成本效益8位单片机由于其制造成本相对较低，因此价格相对较为亲民。这意味着使用8位单片机可以降低整个产品的成本，提高市场竞争力。（2）可靠性高8位单片机经过多年的发展和优化

  9. c++：三种实例化对象方式

    1.隐式创建首先我们定义一个测试类classPerson{private:intage;stringname;public:Person(){cout<<"thisisconstruct~";}Person(intage,stringname){this->age=age;this->name=name;cout<<"