JS实战练习及部分知识回顾

选项卡 (css部分省略)

<!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>选项卡</title>
    <link rel="stylesheet" href="css/css.css" />
  </head>
  <body>
    <!-- 选项卡 -->
    <div class="tabs">
      <!-- 导航部分-->
      <ul class="tab" onmouseover="show(event)">
        <!-- onclick 点击 onmouseover鼠标滑动 -->
        <li class="active" data-index="1">热点</li>
        <li data-index="2">推荐</li>
        <li data-index="3">最新</li>
      </ul>
      <!-- 对应的详情 -->
      <ul class="item active" data-index="1">
        <li><a href="">最新的热门新闻就是焦点新闻1</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
      </ul>
      <ul class="item" data-index="2">
        <li><a href="">最新的热门新闻就是焦点新闻2</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
      </ul>
      <ul class="item" data-index="3">
        <li><a href="">最新的热门新闻就是焦点新闻3</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
        <li><a href="">最新的热门新闻就是焦点新闻</a></li>
      </ul>
    </div>
    <script>
      // 选项卡js
      // 知识点 数组过滤器 filter()
      //   const arr = [2, 5, 2, 10, 8, 50, 3, 6, 90, 7, 1];
      //   const res = [];
      //取大于等于5的数据，传统方式
      //   for (let i = 0; i < arr.length; i++) {
      //     if (arr[i] >= 5) {
      //       res.push(arr[i]);
      //     }
      //   }
      //   console.log(res);
      // filter 返回判断结果为true的函数
      //   console.log(arr.filter(item => item >= 5));
      function show(ev) {
        // console.log(ev.currentTarget);
        // console.log(ev.target);
        const ul = ev.currentTarget;
        const li = ev.target;
        // 1、控制顶部导航的显示
        //添加之前，去掉高亮的导航
        //console.log([...ul.children]); // 查看发现它是一个元素结合（类数组） 加上...转为数组
        //遍历这个数组即可forEach
        [...ul.children].forEach(li => li.classList.remove("active"));
        li.classList.add("active");
        //2、根据顶部导航的显示，显示对应的内容
        const uls = document.querySelectorAll(".item");
        uls.forEach(li => li.classList.remove("active"));
        //判断依据 data-index 对应相等
        // let a = [...uls].filter(ul => ul.dataset.index === li.dataset.index)[0];
        // console.log(a.classList.add("active"));
        [...uls]
          .filter(ul => ul.dataset.index === li.dataset.index)[0]
          .classList.add("active");
      }
    </script>
  </body>
</html>

在线相册（忽略css)

<!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>在线相册</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <ul class="container">
      <!-- 所有相片 js动态创建 -->
    </ul>
    <script>
      //array.reduce(前一个成员，当前成员) 最后一个参数是结果的初值 数组的归并函数
      //   let a = [1, 2, 3, 4, 5].reduce(function (prev, curr) {
      //     console.log(prev, curr);
      //     return prev + curr;
      //   });
      //   let a = [1, 2, 3, 4, 5].reduce((prev, curr) => prev + curr);
      //   console.log(a);
      // 1、动态生成图片
      const ul = document.querySelector(".container");
      //console.log(ul);
      const imgs = [
        "images/img_1.jpg",
        "images/img_2.jpg",
        "images/img_3.jpg",
        "images/img_4.jpg",
        "images/img_5.jpg",
        "images/img_6.jpg",
        "images/img_7.jpg",
        "images/img_8.jpg",
      ];
      //load()当页面加载成功立即执行
      window.onload = showImgs;
      //声明showImgs
      function showImgs() {
        let res = imgs.reduce((prev, curr) => {
          let tpl = `
            <li>
            <img src="${curr}" />
            <div>
                <button onclick="prev(this.parentNode.parentNode)">向前</button>
                <button onclick="next(this.parentNode.parentNode)">向后</button>
                <button onclick="del(this.parentNode.parentNode)">删除</button>
            </div>
            </li>
              `;
          return prev + tpl;
        }, "");
        //console.log(res);
        ul.insertAdjacentHTML("afterbegin", res);
      }
      //删除
      function del(ele) {
        return confirm("是否删除？") ? ele.remove() : false;
      }
      //向前
      function prev(ele) {
        if (ele.previousElementSibling === null) {
          alert("已经是第一张");
          return false;
        }
        let prevNode = ele.previousElementSibling;
        ul.insertBefore(ele, prevNode);
        //console.log(prevNode);
      }
      //向后
      function next(ele) {
        if (ele.nextElementSibling === null) {
          alert("已经是最后一张");
          return false;
        }
        let nextNode = ele.nextElementSibling;
        ul.insertBefore(nextNode, ele);
        //console.log(prevNode);
      }
    </script>
  </body>
</html>

轮播图

html部分

<!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>轮播图</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- 轮播图    -->
    <div class="container">
      <!-- 图片组 -->
      <div class="img-group"></div>
      <!-- 和图片对应数量的按钮 -->
      <div class="btn-group"></div>
      <!-- 向前和向后翻页 -->
      <div class="skip">
        <!-- javascript:; -->
        <a class="prev" href="" onclick="prevImg(event)">&lt;</a>
        <a class="next" href="" onclick="nextImg(event)">&gt;</a>
      </div>
    </div>
    <!-- <ul class="list"></ul> -->
    <script src="banner.js"></script>
  </body>
</html>

banner.js

//文档片段
// const ul = document.querySelector(".list");
// // 文档碎片
// const frag = document.createDocumentFragment();
// for (let i = 0; i < 100; i++) {
//   const li = document.createElement("li");
//   li.textContent = "item" + (i + 1);
//   frag.append(li);
// }
// ul.append(frag);
const banner = [
  "images/banner_1.jpg",
  "images/banner_2.jpg",
  "images/banner_3.jpg",
  "images/banner_4.jpg",
];
//图片组
const imgGroup = document.querySelector(".container > .img-group");
//按钮组
const btnGroup = document.querySelector(".container > .btn-group");
// 当页面加载成功时，将所有图片和按钮全部渲染
window.onload = () => {
  // 生成所有图片
  createImgs(imgGroup, banner.length);
  //生成图片对应的按钮
  createBtns(btnGroup, banner.length);
};
function createImgs(parent, length) {
  const frag = document.createDocumentFragment();
  for (let i = 0; i < length; i++) {
    const img = document.createElement("img");
    //添加索引
    img.dataset.index = `${i + 1}`;
    if (i === 0) img.classList.add("active");
    img.src = banner[i];
    frag.append(img);
  }
  parent.append(frag);
}
function createBtns(parent, length) {
  const frag = document.createDocumentFragment();
  for (let i = 0; i < length; i++) {
    const span = document.createElement("span");
    //添加索引
    span.dataset.index = `${i + 1}`;
    if (i === 0) span.classList.add("active");
    span.onclick = showImgs;
    frag.append(span);
  }
  parent.append(frag);
}
function showImgs(ev) {
  //获取所有图片和按钮
  const imgArr = imgGroup.querySelectorAll("img");
  const btnArr = btnGroup.querySelectorAll("span");
  console.log(imgArr, btnArr);
  //根据图片激活状态，显示对应的图片
  btnArr.forEach(btn => btn.classList.remove("active"));
  imgArr.forEach(img => img.classList.remove("active"));
  ev.target.classList.add("active");
  // 添加根据按钮和图片data-index属性的值 匹配上在激活
  imgArr.forEach(img => {
    if (ev.target.dataset.index === img.dataset.index)
      img.classList.add("active");
  });
}
//翻页
// 向前
function prevImg(ev) {
  ev.preventDefault(); // 禁用a标签的默认跳转行为
  //1、当前图片和当前按钮
  const currentImg = imgGroup.querySelector("img.active");
  const currentBtn = btnGroup.querySelector("span.active");
  //2、取消当前图片和当前按钮的激活状态
  currentImg.classList.remove("active");
  currentBtn.classList.remove("active");
  //3、取得当前图片和按钮的前一个兄弟节点
  const prevImg = currentImg.previousElementSibling;
  const prevBtn = currentBtn.previousElementSibling;
  //
  //4、如果存在前一个兄弟，就设置它为激活状态
  if (prevImg !== null && prevBtn !== null) {
    prevBtn.classList.add("active");
    prevImg.classList.add("active");
  } else {
    imgGroup.lastElementChild.classList.add("active");
    btnGroup.lastElementChild.classList.add("active");
  }
}
// 向后
function nextImg(ev) {
  ev.preventDefault(); // 禁用a标签的默认跳转行为
  //1、当前图片和当前按钮
  const currentImg = imgGroup.querySelector("img.active");
  const currentBtn = btnGroup.querySelector("span.active");
  //2、取消当前图片和当前按钮的激活状态
  currentImg.classList.remove("active");
  currentBtn.classList.remove("active");
  //3、取得当前图片和按钮的前一个兄弟节点
  const nextImg = currentImg.nextElementSibling;
  const nextBtn = currentBtn.nextElementSibling;
  //
  //4、如果存在前一个兄弟，就设置它为激活状态
  if (nextImg !== null && nextBtn !== null) {
    nextBtn.classList.add("active");
    nextImg.classList.add("active");
  } else {
    imgGroup.firstElementChild.classList.add("active");
    btnGroup.firstElementChild.classList.add("active");
  }
}
//每2s自送切换到下一个，使用setInterval 执行间歇事件
// setInterval(() => {
//   //1、当前图片和当前按钮
//   const currentImg = imgGroup.querySelector("img.active");
//   const currentBtn = btnGroup.querySelector("span.active");
//   //2、取消当前图片和当前按钮的激活状态
//   currentImg.classList.remove("active");
//   currentBtn.classList.remove("active");
//   //3、取得当前图片和按钮的前一个兄弟节点
//   const nextImg = currentImg.nextElementSibling;
//   const nextBtn = currentBtn.nextElementSibling;
//   //
//   //4、如果存在前一个兄弟，就设置它为激活状态
//   if (nextImg !== null && nextBtn !== null) {
//     nextBtn.classList.add("active");
//     nextImg.classList.add("active");
//   } else {
//     imgGroup.firstElementChild.classList.add("active");
//     btnGroup.firstElementChild.classList.add("active");
//   }
// }, 2000);
//简单写法
//获取翻页到下一页的按钮
const cBtn = document.querySelector(".container > .skip > .next");
//创建一个自定义事件
const myclick = new Event("click");
//间歇性执行自定义事件
setInterval(() => cBtn.dispatchEvent(myclick), 2000);

购物车

html部分

<!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>购物车</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <table>
      <caption>
        我的购物车
      </caption>
      <thead>
        <th>
          <input type="checkbox" name="checkAll" id="check-all" checked /><label
            for="check-all"
            >全选</label
          >
        </th>
        <th>图片</th>
        <th>品名</th>
        <th>单位</th>
        <th>单价/元</th>
        <th>数量</th>
        <th>金额/元</th>
      </thead>
      <tbody>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1020"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p1.png" alt="" /></a>
          </td>
          <td>JavaScript权威指南(第七版)</td>
          <td>本</td>
          <td class="price">100</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1020"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p2.png" alt="" /></a>
          </td>
          <td>JavaScript高级程序设计(第四版)</td>
          <td>本</td>
          <td class="price">129</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1030"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p3.png" alt="" /></a>
          </td>
          <td>JavaScript忍者秘籍(第二版)</td>
          <td>台</td>
          <td class="price">99</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1040"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p4.png" alt="" /></a>
          </td>
          <td>ThinkPad X1 Carbon 2021</td>
          <td>台</td>
          <td class="price">12999</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1050"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p5.png" alt="" /></a>
          </td>
          <td>MacBook Pro 16 10代i7 16G 512G</td>
          <td>台</td>
          <td class="price">23800</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">总计:</td>
          <td id="sum">0</td>
          <td id="total-amount">0</td>
        </tr>
      </tfoot>
    </table>
    <div style="width: 90%; margin: 10px auto">
      <button style="float: right; width: 100px">结算</button>
    </div>
    <script src="cart.js"></script>
  </body>
</html>

复选框和自动计算数值变化(js)[不完整]

const checkAll = document.querySelector("#check-all");
const checkItems = document.getElementsByName("item");
//全选复选框
checkAll.onchange = ev =>
  checkItems.forEach(item => (item.checked = ev.target.checked));
checkItems.forEach(
  item =>
    (item.onchange = () =>
      (checkAll.checked = [...checkItems].every(item => item.checked)))
);
//自动计算 所有的计算都是基于数量的变化
const numInput = document.querySelectorAll('input[type="number"]');
numInput.forEach(function (input) {
  input.onchange = autoCalculate;
});
function autoCalculate() {
  const numbers = document.querySelectorAll('input[type="number"]');
  const numArr = [...numbers].map(function (num) {
    return num.value * 1;
  });
  const prices = document.querySelectorAll("tbody .price");
  const priceArr = [...prices].map(function (num) {
    return num.textContent * 1;
  });
  //console.log(priceArr);
  //计算金额
  const amountArr = [priceArr, numArr].reduce(function (prev, curr) {
    return prev.map(function (item, key) {
      return item * curr[key];
    });
  });
  //console.log(amountArr);
  let tatal = amountArr.reduce(function (prev, curr) {
    return prev + curr;
  });
  let sum = numArr.reduce(function (prev, curr) {
    return prev + curr;
  });
  //渲染
  document.querySelectorAll(".amount").forEach(function (item, index) {
    item.textContent = amountArr[index];
  });
  document.querySelector("#total-amount").textContent = tatal;
  document.querySelector("#sum").textContent = sum;
}
window.onload = autoCalculate;

改进js

//全选复选框
const checkAll = document.querySelector("#check-all");
const checkItems = document.getElementsByName("item");
//设置一个空数值用来接收checkItems checked的值 为true时为1
let isChecked = [];
checkItems.forEach(item => isChecked.push(item.checked === true ? 1 : 0));
//自动计算 所有的计算都是基于数量的变化
const numInput = document.querySelectorAll('input[type="number"]');
numInput.forEach(function (input) {
  input.onchange = autoCalculate;
});
function autoCalculate() {
  const numbers = document.querySelectorAll('input[type="number"]');
  const numArr = [...numbers].map(function (num) {
    return num.value * 1;
  });
  const sumArr = [numArr, isChecked].reduce(function (prev, curr) {
    return prev.map(function (item, key) {
      return item * curr[key];
    });
  });
  //console.log(numArr);
  const prices = document.querySelectorAll("tbody .price");
  const priceArr = [...prices].map(function (num) {
    return num.textContent * 1;
  });
  //console.log(priceArr);
  //计算金额
  const amountArr = [priceArr, numArr].reduce(function (prev, curr) {
    return prev.map(function (item, key) {
      return item * curr[key];
    });
  });
  const amountAll = [amountArr, isChecked].reduce(function (prev, curr) {
    return prev.map(function (item, key) {
      return item * curr[key];
    });
  });
  //console.log(amountArr);
  let tatal = amountAll.reduce(function (prev, curr) {
    return prev + curr;
  });
  let sum = sumArr.reduce(function (prev, curr) {
    return prev + curr;
  });
  //渲染
  document.querySelectorAll(".amount").forEach(function (item, index) {
    item.textContent = amountArr[index];
  });
  document.querySelector("#total-amount").textContent = tatal;
  document.querySelector("#sum").textContent = sum;
}
window.onload = autoCalculate;
//判断全选和设置isChecked变化
checkItems.forEach(item => {
  item.onchange = () => {
    checkAll.checked = [...checkItems].every(item => item.checked);
    autoCheck();
  };
});
function autoCheck() {
  const chItem = document.getElementsByName("item");
  const numCheck = [...chItem].map(function (num) {
    return num.checked === true ? 1 : 0;
  });
  isChecked = numCheck;
  autoCalculate();
}
console.log(isChecked);
checkAll.onchange = ev => {
  isChecked = [];
  checkItems.forEach(item => (item.checked = ev.target.checked));
  checkItems.forEach(item => isChecked.push(item.checked === true ? 1 : 0));
  if (ev.target.checked) {
    autoCalculate();
  } else {
    document.querySelector("#total-amount").textContent = 0;
    document.querySelector("#sum").textContent = 0;
  }
};

总结：苦思冥想的做了一个半残的js代码，学艺不精，还需要进一步的改进代码，希望老师和同学多多指教。

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

重温emmet让代码写作提升10倍

2021-09-24 12:41:48

JS实战练习及部分知识回顾

选项卡 (css部分省略)

在线相册 （忽略css)

轮播图

购物车

在线相册（忽略css)