案例练习：购物车全选功能和自动计算价格功能 - JS学习

首页 > 博客列表 > 案例练习：购物车全选功能和自动计算价格功能

博主信息

博文 145

粉丝 7

访问量 202204

专题推荐

更多>

购物车案例

1.代码部分

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table{
            width: 800px;
            height: 400px;
            border-bottom: 1px solid #000000;
            border-top: 1px solid #000000;
            margin: 10px auto;
            text-align: center;
        }
        input[type="number"]{
            width: 40px;
        }
        table,th {
            background-color: lightgray;
            border: none;
        }
        table , tr,td{
            background-color: #fff;
            border: none;
            /* border-top:1px solid #000000; */
            /* border-bottom:1px solid #000000; */
        }
        table , tr:last-of-type{
            /* border-top:1px solid #000000; */
            border-bottom:1px solid #000000;
        }
        table , tr:nth-last-of-type(2n) > td{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0">
        <caption><h2>购物车    </h2></caption>
        <tr>
            <th><input type="checkbox" id="quan" checked="true"><label for="quan">全选</label></th>
            <th>图片</th>
            <th>名称</th>
            <th>单位</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价</th>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="1" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="1" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="1" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="1" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="2" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td colspan="5">共计</td>
            <td class="sum">5</td>
            <td class="amount">1000000</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    // 全选按钮功能
    $("#quan").change(ev=>$('.check').prop('checked',$(ev.target).prop('checked') ? true : false));
    $('.check').change(()=>$("#quan").prop('checked',[...$('.check')].every(item=>$(item).prop('checked'))?true:false));
    // 自动计算商品价格和总价
    autoComputer();
    function autoComputer(){
        let is=[...$(".check")].map(item=>$(item).prop("checked")?1:0);
        let prices=[...$(".price")].map(item=>$(item).text()*1);
        let nums=[...$("input[type='number']")].map(item=>$(item).val()*1);
        let isnums=[nums,is].reduce((prev,curr)=>prev.map((item,index)=>item*curr[index]));
        let moneys=[prices,nums].reduce((prev,curr)=>prev.map((item,index)=>item*curr[index]));
        let ismoneys=[moneys,is].reduce((prev,curr)=>prev.map((item,index)=>item*curr[index]))
        $(".money").each((index,item)=>$(item).text(moneys[index]));
        $(".amount").text(ismoneys.reduce((prev,curr)=>prev+curr));
        $(".sum").text(isnums.reduce((prev,curr)=>prev+curr));
    }
    $("input[type='number']").change(()=>autoComputer());
    // 根据全选按钮计算数量和总价
    // let is=[...$(".check")].map(item=>$(item).prop("checked")?1:0);
    $("table input[type='checkbox']").change(()=>autoComputer());
</script>    
</html>

2.代码运行结果

3.案例分析：
1.全选按钮功能：
（1）全选触发，主要监听全选按钮的值，如果为true,就通过遍历各个商品的选中按钮设置为true;取消全选方法相同；而通过监听各个商品的选中按钮的值，经过数组函数every（）判断来设置全选按钮是否为全选
（2）调整商品数量自动计算商品价格：主要通过监听各个商品数量的变化触发自动计算函数来重新渲染出结果数据；
（3）未选中产品不参与最终结算（而单个商品价格还的计算）：通过遍历商品选中按钮的值返回一个数组（有0和1组成）；在计算商品数量和计算商品总价时，根据是否选中的值（1或0）来计算：如果为0时（未选中）在计算总数量时，商品数量0参与计算，选中时商品数量1参与计算；计算总价原理相同

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

12月29日练习：php中文网footer案例（组件footer）

2019-12-29 13:35:19