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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198759
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
案例練習(xí)：購物車全選功能和自動(dòng)計(jì)算價(jià)格功能
李東亞1??3????12?
原創(chuàng)
1273人瀏覽過

購物車案例

1.代碼部分

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>購物車</title>
  8.     <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
  9.     <style>
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.         table{
  16.             width: 800px;
  17.             height: 400px;
  18.             border-bottom: 1px solid #000000;
  19.             border-top: 1px solid #000000;
  20.             margin: 10px auto;
  21.             text-align: center;
  22.         }
  23.         input[type="number"]{
  24.             width: 40px;
  25.         }
  26.         table,th {
  27.             background-color: lightgray;
  28.             border: none;
  29.         }
  30.         table , tr,td{
  31.             background-color: #fff;
  32.             border: none;
  33.             /* border-top:1px solid #000000; */
  34.             /* border-bottom:1px solid #000000; */
  35.         }
  36.         table , tr:last-of-type{
  37.             /* border-top:1px solid #000000; */
  38.             border-bottom:1px solid #000000;
  39.         }
  40.         table , tr:nth-last-of-type(2n) > td{
  41.             background-color: lightblue;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <table border="1" cellspacing="0">
  47.         <caption><h2>購物車    </h2></caption>
  48.         <tr>
  49.             <th><input type="checkbox" id="quan" checked="true"><label for="quan">全選</label></th>
  50.             <th>圖片</th>
  51.             <th>名稱</th>
  52.             <th>單位</th>
  53.             <th>價(jià)格</th>
  54.             <th>數(shù)量</th>
  55.             <th>總價(jià)</th>
  56.         </tr>
  57.         <tr>
  58.             <td><input type="checkbox" class='check' checked="true"></td>
  59.             <td>圖片</td>
  60.             <td>蘋果</td>
  61.             <td>臺</td>
  62.             <td class="price">4999</td>
  63.             <td><input type="number" value="1" min=1 max=10></td>
  64.             <td class="money">4999</td>
  65.         </tr>
  66.         <tr>
  67.             <td><input type="checkbox" class='check' checked="true"></td>
  68.             <td>圖片</td>
  69.             <td>蘋果</td>
  70.             <td>臺</td>
  71.             <td class="price">4999</td>
  72.             <td><input type="number" value="1" min=1 max=10></td>
  73.             <td class="money">4999</td>
  74.         </tr>
  75.         <tr>
  76.             <td><input type="checkbox" class='check' checked="true"></td>
  77.             <td>圖片</td>
  78.             <td>蘋果</td>
  79.             <td>臺</td>
  80.             <td class="price">4999</td>
  81.             <td><input type="number" value="1" min=1 max=10></td>
  82.             <td class="money">4999</td>
  83.         </tr>
  84.         <tr>
  85.             <td><input type="checkbox" class='check' checked="true"></td>
  86.             <td>圖片</td>
  87.             <td>蘋果</td>
  88.             <td>臺</td>
  89.             <td class="price">4999</td>
  90.             <td><input type="number" value="1" min=1 max=10></td>
  91.             <td class="money">4999</td>
  92.         </tr>
  93.         <tr>
  94.             <td><input type="checkbox" class='check' checked="true"></td>
  95.             <td>圖片</td>
  96.             <td>蘋果</td>
  97.             <td>臺</td>
  98.             <td class="price">4999</td>
  99.             <td><input type="number" value="2" min=1 max=10></td>
  100.             <td class="money">4999</td>
  101.         </tr>
  102.         <tr>
  103.             <td colspan="5">共計(jì)</td>
  104.             <td class="sum">5</td>
  105.             <td class="amount">1000000</td>
  106.         </tr>
  107.     </table>
  108. </body>
  109. <script type="text/javascript">
  110.     // 全選按鈕功能
  111.     $("#quan").change(ev=>$('.check').prop('checked',$(ev.target).prop('checked') ? true : false));
  112.     $('.check').change(()=>$("#quan").prop('checked',[...$('.check')].every(item=>$(item).prop('checked'))?true:false));
  113.     // 自動(dòng)計(jì)算商品價(jià)格和總價(jià)
  114.     autoComputer();
  115.     function autoComputer(){
  116.         let is=[...$(".check")].map(item=>$(item).prop("checked")?1:0);
  117.         let prices=[...$(".price")].map(item=>$(item).text()*1);
  118.         let nums=[...$("input[type='number']")].map(item=>$(item).val()*1);
  119.         let isnums=[nums,is].reduce((prev,curr)=>prev.map((item,index)=>item*curr[index]));
  120.         let moneys=[prices,nums].reduce((prev,curr)=>prev.map((item,index)=>item*curr[index]));
  121.         let ismoneys=[moneys,is].reduce((prev,curr)=>prev.map((item,index)=>item*curr[index]))
  122.         $(".money").each((index,item)=>$(item).text(moneys[index]));
  123.         $(".amount").text(ismoneys.reduce((prev,curr)=>prev+curr));
  124.         $(".sum").text(isnums.reduce((prev,curr)=>prev+curr));
  125.     }
  126.     $("input[type='number']").change(()=>autoComputer());
  127.     // 根據(jù)全選按鈕計(jì)算數(shù)量和總價(jià)
  128.     // let is=[...$(".check")].map(item=>$(item).prop("checked")?1:0);
  129.     $("table input[type='checkbox']").change(()=>autoComputer());
  131. </script>    
  132. </html>

2.代碼運(yùn)行結(jié)果

3.案例分析：
1.全選按鈕功能：
（1）全選觸發(fā)，主要監(jiān)聽全選按鈕的值，如果為true,就通過遍歷各個(gè)商品的選中按鈕設(shè)置為true;取消全選方法相同；而通過監(jiān)聽各個(gè)商品的選中按鈕的值，經(jīng)過數(shù)組函數(shù)every（）判斷來設(shè)置全選按鈕是否為全選
（2）調(diào)整商品數(shù)量自動(dòng)計(jì)算商品價(jià)格：主要通過監(jiān)聽各個(gè)商品數(shù)量的變化觸發(fā)自動(dòng)計(jì)算函數(shù)來重新渲染出結(jié)果數(shù)據(jù)；
（3）未選中產(chǎn)品不參與最終結(jié)算（而單個(gè)商品價(jià)格還的計(jì)算）：通過遍歷商品選中按鈕的值返回一個(gè)數(shù)組（有0和1組成）；在計(jì)算商品數(shù)量和計(jì)算商品總價(jià)時(shí)，根據(jù)是否選中的值（1或0）來計(jì)算：如果為0時(shí)（未選中）在計(jì)算總數(shù)量時(shí)，商品數(shù)量0參與計(jì)算，選中時(shí)商品數(shù)量1參與計(jì)算；計(jì)算總價(jià)原理相同

批改老師：天蓬老師天蓬老師

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

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)