购物车案例

首页 > 博客列表 > 购物车案例

博主信息

博文 37

粉丝 0

访问量 44330

专题推荐

更多>

array.every()和array.some()

every(callback): 对数组中每个成员进行回调处理,只有全部为true,最终才返回true,否则就是false
类似” and “,” 逻辑与 “
例如：[5, 6, 7, 8].every(item => item > 3)
当前数组中的元素全部都大于3返回true
在数组中只要存在大于6的成员,就是返回true
[5, 6, 7, 8].some(item => item > 6)

模块的知识

什么是模块？
模块就是一个js代码块
封装成模块的js文件，内部成员对外不可见，除非导出来，模块解决了js的模块化开发与代码封装问题
模块解决了什么问题？
可维护性：每个模块是独立的，各写各个互不影响，出错直接定位责任人
可复制性：只需要一条import指令就可以导入
避免污染全局空间：模块处在自己的命名空间

模块是一个js文件，显然不能像之前一样，将js代码写到html中
模块要到一个独立的js文件中，并使用一些特别的语法和关键字

<script type="module">
//声明为模块
  //导入 userName变量 从 module1.js文件中
  import {userName,hello} from './module1.js';
console.log(userName); 
console.log(hello(userName));
//禁止重复声明模块成员
let userName; //报错
//模块成员不允许更新
userName="小李";//报错
//别名导出解决以上报错
import {myName,echo} from './module1.js';
//别名导入也可解决以上报错
import {userName as firstName} from './module1.js';
//导入默认模块  不用{}
import Name from './module1.js';
//导入默认成员和普通成员
import world,{email} from './module1.js';
//-------------------命名空间
// 命名空间是一个容器，内部可以包括任何类型的数据
// 命名空间是一个对象，可以挂载到当前全局中
//导入的所有变量挂载到 namespace 下
import * as namespace from "./module1.js";
</script>

//module1.js 文件

//export导出
export let userName="小明";
export function hello(name){
  return "hello" +name;
}
//统一导出 在userName就不用再声明exprot了
export{userName,hello}
//解决在脚本中不能声明问题使用别名导出
export{userName as myName,hello as echo};
//默认的成员
//一个模块只允许一个默认导出
let Name="小红";
export default Name;
//导出列表中，既有默认成员，也有普通成员
function world(name){
    return name;
}
let email="admin@php.cn";
//world 别名default 则声明成了默认成员
export{ email,world as default};

点击全选/全不选
原生：

        const checkAll=document.querySelector('#check-all');
        const items=document.getElementsByName('item');
        checkAll.onchange=ev=>{
            items.forEach(item=>item.checked=ev.target.checked);
        } 
        //当item都选上则全选按钮选中
        items.forEach(item=>(item.onchange=()=>(checkAll.checked=[...items].every(item=>item.checked)))
        );

jquery实现

     $("#check-all").change(function(){
       console.log( $(":checkbox[name='item']"));
       $(":checkbox[name='item']").prop('checked',this.checked)
     });
     $(":checkbox[name='item']").change(ev=>$("#check-all").prop("checked",ev.target.checked));

计算总价：
感觉方法欠妥，但又想不出更好的了。
实现改变状态，自动计算金额

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
      <tr>
        <!-- 全选复选框 -->
        <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>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1020" checked />
        </td>
        <td>
          <a href=""><img src="images/p1.jpg" alt="" /></a>
        </td>
        <td>iPhone 11</td>
        <td>台</td>
        <td class="price">4799</td>
        <td><input  class="inputt" type="number" min="1" value="1" /></td>
        <td class="amount">xxxx</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1020" checked />
        </td>
        <td>
          <a href=""><img src="images/p2.jpg" alt="" /></a>
        </td>
        <td>小米pro 11</td>
        <td>部</td>
        <td class="price">3999</td>
        <td><input class="inputt" type="number" min="1" value="2" /></td>
        <td class="amount">xxxx</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1030" checked />
        </td>
        <td>
          <a href=""><img src="images/p3.jpg" alt="" /></a>
        </td>
        <td>MacBook Pro</td>
        <td>台</td>
        <td class="price">18999</td>
        <td><input class="inputt" type="number" min="1" value="1" /></td>
        <td class="amount">xxxx</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1040" checked />
        </td>
        <td>
          <a href=""><img src="images/p4.jpg" alt="" /></a>
        </td>
        <td>小米75电视</td>
        <td>台</td>
        <td class="price">5999</td>
        <td><input class="inputt" type="number" min="1" value="2" /></td>
        <td class="amount">xxxx</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1050" checked />
        </td>
        <td>
          <a href=""><img src="images/p5.jpg" alt="" /></a>
        </td>
        <td>Canon 90D单反</td>
        <td>台</td>
        <td class="price">9699</td>
        <td><input class="inputt" type="number" min="1" value="1" /></td>
        <td class="amount">xxxx</td>
      </tr>
    </tbody>
    <tfoot>
      <tr style="font-weight: bolder; font-size: 1.2em">
        <td colspan="5">总计:</td>
        <td id="sum">xxxx</td>
        <td id="total-amount">xxxx</td>
      </tr>
    </tfoot>
  </table>
  <div style="width: 90%; margin: 10px auto">
    <button style="float: right; width: 100px">结算</button>
  </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
    </script> 
    <script>
//----jquery---------------------
    //  $("#check-all").change(function(){
    //    console.log( $(":checkbox[name='item']"));
    //    $(":checkbox[name='item']").prop('checked',this.checked)
    //  });
    //  $(":checkbox[name='item']").change(ev=>$("#check-all").prop("checked",ev.target.checked));
           //点击全选则都选上
           const checkAll=document.querySelector('#check-all');
        const items=document.getElementsByName('item');
        checkAll.onchange=ev=>{
            items.forEach(item=>item.checked=ev.target.checked);
        } 
    //------------------------计算总价----------------------------------------
//---------------------根据复选框状态，自动计算金额-----------------------------------------------
    // 得到所有台数标签
    const numInputs = document.querySelectorAll('tbody input[type="number"]');
    //单价标签
    const prices=document.querySelectorAll("tbody .price");
    //金额标签
    const amount=document.querySelectorAll(".amount");
    items.forEach(item=>(item.onchange=()=>{ 
      //改变全选按钮状态
      checkAll.checked=[...items].every(item=>item.checked);
      //将复选框状态放到一个数组里
      let numite=[...items].map(item=>item.checked);
      for(let i=0;i<numite.length;i++){
      if(!numite[i]){
        //根据选择状态false  改变 台数和单价的 class 
        numInputs[i].classList.replace('inputt','inputf');  
        prices[i].classList.replace('price','pricef');
        amount[i].classList.replace('amount','amountf');
      }else{
        numInputs[i].classList.replace('inputf','inputt'); 
        prices[i].classList.replace('pricef','price');
        amount[i].classList.replace('amountf','amount');
      }
    }
    }));
//--------------------弊端：未选中的商品，改变其数量则无法计算出其总金额------------------------------------------
//-------------------------全选按钮没有实现，全选了计算总金额-----------------------------------------------
//------------------------自己实现方式虽然解决了问题了，但总感觉存在弊端，不是完美的解决方式---------------------
    const numInput = document.querySelectorAll('tbody input.inputt[type="number"]');
    numInput.forEach(input => (onchange = autoCalculate));
      // 用户更新数量时触发自动计算
    window.onload=autoCalculate;
    // 封装一个自动计算的函数
    function autoCalculate() {
    //计算商品数量
    const numbers=document.querySelectorAll('tbody input.inputt[type="number"]');
    const numArr=[...numbers].map(item=>item.value*1);
    //计算选择了的台数
    let sum=numArr.reduce((pre,cur)=>pre+cur);
    //计算总金额  数量* 单价
    const prices=document.querySelectorAll("tbody .price");
    const priceArr=[...prices].map(item=>item.textContent*1);
    const amountArr =[priceArr,numArr].reduce((total, curr)=>total.map((item,index)=>item*curr[index]));
    // 计算总金额
    //只计算选上的数据
    let totalAmount = amountArr.reduce((pre, cur) => pre + cur);
    //将结果渲染到页面中
    document.querySelector('#sum').textContent=sum;
    document.querySelector('#total-amount').textContent=totalAmount;
    // 每个商品的金额
    document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));
    }
    </script>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

html的基本标签介绍

2020-12-09 11:43:07