国产成人精品999在线观看,欧美激情一区二区三区在线,欧美人妻精品一区二区三区

首頁 > 博客列表 > 購物車實例演示

博主信息

博文 46

粉絲 0

評論 0

訪問量 46554

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

代碼：

<!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>購物車-2</title>
    <link rel="stylesheet" href="css/demo3.css">
</head>
<body>
    <div class="box">
        <!-- 全選框 -->
        <div class="selectAll">
            <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked>
            <label for="check-all">全選</label>
        </div>
        <!-- 商品列表 -->
        <ul class="list">
            <li>
                <span>選擇</span>
                <span>品名</span>
                <span>數(shù)量</span>
                <span>單價</span>
                <span>金額</span>
             </li>
            <li>
                <input type="checkbox" onchange="checkItems()" checked>
                <span class="content">吹風機</span>
                <input type="number" value="1" min="1" class="num">
                <span class="price">100</span>
                <span class="amount">0</span>
            </li>
            <li>
                <input type="checkbox" onchange="checkItems()" checked>
                <span class="content">電腦</span>
                <input type="number" value="2" min="1" class="num">
                <span class="price">2000</span>
                <span class="amount">0</span>
            </li>
            <li>
                <input type="checkbox" onchange="checkItems()" checked>
                <span class="content">相機</span>
                <input type="number" value="3" min="1" class="num">
                <span class="price">1500</span>
                <span class="amount">0</span>
            </li>
            <li>
                <span>總計:</span>
                <span class="total-num">0</span>
                <span class="total-amount">0</span>
            </li>
        </ul>
        <button class="account">結(jié)算</button>
    </div>
    <script>
        //全選
        function checkAll() {
            let status=event.target.checked;
            console.log(status);
        //子商品狀態(tài)
        document
            .querySelectorAll(".list li input[type='checkbox']")
            .forEach((item)=>(item.checked=status));
        autoCalculate();
        }
        function checkItems() {
            //全部商品
            let items = document.querySelectorAll(".list li input[type='checkbox']");
            //判斷狀態(tài)
            let status=[...items].every((item)=>item.checked===true);
            console.log(status);
            document.querySelector('.check-all').checked=status;
            autoCalculate();
        }
        const nums=document.querySelectorAll('.num');
        // console.log(nums);
        //商品是否被選中
        function goodStatus(numArr){
            let items =document.querySelectorAll(".list li input[type='checkbox']");
            return numArr.map((num,index)=>{
                if (items[index].checked===false){
                    return (num=0);
                } else {
                    return num;
                }
            });
        }
        //計算總數(shù)量
        function getTotalNum(numArr) {
            numArr=goodStatus(numArr);
            return numArr.reduce((acc, cur)=>acc+cur);
        }
        //計算每個商品金額
        function getAmount(numArr,priceArr){
            return numArr.map((num,index)=>num*priceArr[index]);
        }
        //總金額
        function getTotalAmount(amountArr){
            amountArr=goodStatus(amountArr);
            return amountArr.reduce((acc,cur)=>acc+cur);
        }
        //自動計算
        function autoCalculate() {
            //數(shù)量數(shù)組
            const numArr=[...nums].map((num)=>parseInt(num.value));
            //單價數(shù)組
            const prices=document.querySelectorAll('.price');
            const pricesArr=[...prices].map((price)=>parseInt(price.textContent));
            //金額數(shù)組
            const amountArr =getAmount(numArr,pricesArr);
            document.querySelector('.total-num').textContent = getTotalNum(numArr);
        document.querySelector('.total-amount').textContent =
          getTotalAmount(amountArr);
        //為每個商品填充金額
        document
          .querySelectorAll('.amount')
          .forEach((amount, index) => (amount.textContent = amountArr[index]));
      }
      //自動加載
      window.onload = autoCalculate();
      //數(shù)量變化自動計算
      [...nums].forEach((num) => (num.onchange = autoCalculate));
    </script>
</body>
</html>

效果：

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

實例演示元素來源與優(yōu)先級

2022-03-19 21:38:03

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

代碼：

效果：