欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

购物车实现

程序员文章站 2024-03-20 13:26:16
...

html代码：

<body onselectstart="return false;">
<template id="temp">
    <tr>
        <td>
            <input type="checkbox" class="check" checked>
        </td>
        <td>
            <img src="images/{src}">{txt}
        </td>
        <td>{price}</td>
        <td>
            <span class="reduce">-</span><input class="text" value="1"><span class="add">+</span>
        </td>
        <td>{subtotal}</td>
        <td>
            <span class="del">删除</span>
        </td>
    </tr>
</template>
<div class="box" id="box">
    <table>
        <thead>
        <tr>
            <th>
                <label>
                    <input type="checkbox" class="checkAll check" checked>全选
                </label>
            </th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
    <div class="bottom" id="bottom">
        <aside>

        </aside>
        <label>
            <input type="checkbox" class="checkAll check" checked>全选
        </label>
        <span class="delAll">全部删除</span>
        <div>已选商品：
            <span class="selected" id="num">3</span>件
        </div>
        <a href="#" class="show">显示或隐藏</a>
        <div>合计：￥
            <span class="total" id="total">7000</span>
        </div>
        <div class="js">结算</div>
    </div>
</div>

CSS代码

body {
            background-color: #bcdecf;
        }

        div.box {
            width: 700px;
            margin: 50px auto 0;
        }

        div.box table {
            border-collapse: collapse;
            width: inherit;
            text-align: center;
            background-color: #f6f6f6;
        }

        div.box table td, div.box th {
            border: 1px solid #999;
        }

        div.box th {
            height: 40px;
        }

        div.box table tbody img {
            height: 50px;
        }

        div.box table tbody tr span {
            cursor: default;
        }

        div.box table tbody tr td:nth-child(2) img {
            vertical-align: middle;
        }

        div.box table tbody tr td:nth-child(4) span {
            display: inline-block;
            width: 15px;
            line-height: 30px;
            background-color: #666;
            color: #eee;
            vertical-align: middle;
        }

        div.box table tbody tr td:nth-child(4) input {
            width: 20px;
            height: 20px;
            outline: none;
            vertical-align: middle;
            text-align: center;
        }

        div.box table tbody tr td:nth-child(6) span {
            padding: 4px 10px;
            background-color: #999;
            color: white;
        }

        div.box div.bottom {
            padding: 15px 0;
            margin-top: 15px;
            height: 25px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        div.box div.bottom span.delAll {
            cursor: default;
        }

        div.box div.bottom div.js {
            padding: 0 6px;
            background-color: #00A5FF;
            color: white;
            margin-right: 10px;
            cursor: default;
        }

        div.box div.bottom aside div {
            display: inline-block;
        }

        div.box div.bottom aside div span {
            position: absolute;
            width: 50px;
            line-height: 20px;
            padding: 0 5px;
            background-color: rgba(255, 255, 255, .4);
            color: #333;
            font-size: 10px;
            margin-left: -60px;
            margin-top: 20px;
            transform: rotate(30deg);
            cursor: pointer;
        }

        div.box div.bottom aside img {
            height: 60px;
            vertical-align: middle;
        }

        div.box div.bottom aside {
            position: absolute;
            background-color: #0a74cb;
            width: 100%;
            top: -70px;
            padding: 5px;
            box-sizing: border-box;
            display: none;
        }

        div.box div.bottom aside.on {
            display: block;
        }

        div.box div.bottom aside:after {
            position: absolute;
            content: "";
            border: 10px solid transparent;
            border-top-color: #0a74cb;
            bottom: -19px;
            right: 280px;
        }

        div.box div.bottom a, div.box div.bottom a:visited {
            color: #0b97ff;
            text-decoration: none;
        }

JS代码`

 function $(exp){//获取元素
        var el;
        if (/^#\w+$/.test(exp)){
            el=document.querySelector(exp);
        } else {
            el=document.querySelectorAll(exp);
        }
        return el;
    }
    var arr = [];/*表单的数据*/
    arr[arr.length] = {src: '1.jpg', txt: 'Casio/卡西欧 EX-TR350', price: 5999.88};
    arr[arr.length] = {src: '2.jpg', txt: 'Canon/佳能 PowerShot SX50 HS', price: 3888.50};
    arr[arr.length] = {src: '3.jpg', txt: 'Sony/索尼 DSC-WX300', price: 1428.50};
    arr[arr.length] = {src: '4.jpg', txt: 'Fujifilm/富士 instax mini 25', price: 640.60};
    var temp=$('#temp').innerHTML;
    var tbody=$('#tbody');
    arr.forEach(function (el) {//把数据插入到HTML中
        tbody.innerHTML += temp.replace("{src}", el.src).replace("{txt}", el.txt).replace("{price}", el.price)
            .replace("{subtotal}", el.price);
    });
    var trs=$('#tbody tr');
    var box=$('#box');
    var aside=$('#bottom aside')[0];
    box.onclick=function (ev) {
        //利用事件冒泡的原理，把事件添加给父级box
        var e=ev||event;
        var target=e.target||e.srcElement;//获取当前点击对象
        var cls=target.className;
        if (cls.indexOf("check")!=-1)cls='check';
        switch (cls) {
            case 'add'://添加商品数量
                var tr=target.parentNode.parentNode;//找到点击过那一行
                var tds=tr.cells;
                target.previousSibling.value++;//数量那一栏的数字加一
                tds[4].innerText=(tds[2].innerText*target.previousElementSibling.value).toFixed(2);
                //修改小计里面的价格
                break;
            case 'reduce'://减少商品数量
                var tr=target.parentNode.parentNode;//找到点击过那一行
                var tds=tr.cells;
                if (target.nextElementSibling.value!=1) target.nextElementSibling.value--;
                //数量那一栏减一
                tds[4].innerText=(tds[2].innerText*target.nextElementSibling.value).toFixed(2);
                //修改小计里面的价格
                break;
            case 'text'://直接修改数量那一栏input的值
                var tr=target.parentNode.parentNode;
                var tds=tr.cells;
                target.onblur=function () {//失去焦点时执行
                    tds[4].innerText=(tds[2].innerText*this.value).toFixed(2);
                    this.onblur=null;//销毁事件
                };
                break;
            case 'del': //删除商品
                var tr=target.parentNode.parentNode;
                if (confirm('你确定要删除吗？'))
                    tbody.removeChild(tr);
                break;
            case 'check'://复选框选择商品
                chk(target);//执行复选框函数
                break;
            case 'delAll'://删除全部商品
                if (confirm('你确定要删除吗？'))
                    tbody.innerHTML='';
                break;
            case 'show'://显示、隐藏商品
                aside.classList.toggle('on');
                break;
            case 'cancel':
                var index=target.getAttribute('data-index');
                trs[index].cells[0].children[0].checked=false;
        }
        total();//计算价格
    };
    var total_all=$('#total');
    var num=$('#num');
    total();
    function total() {//计算价格
        var sum=0,number=0;
        trs=$('tbody tr');
        var str='';
        trs.forEach(function (tr,i) {
            //遍历每一行判断，将已选择商品添加到显示隐藏里面
            var tds=tr.cells;
            if (tds[0].children[0].checked){
                sum+=parseFloat(tds[4].innerText);
                number+=parseInt(tds[3].children[1].value);
                str+=`<div><img src="images/${i+1}.jpg"><span class="cancel" data-index="${i}">取消选择</span></div>`
            }
            total_all.innerText=sum.toFixed(2);
            num.innerText=number;
            aside.innerHTML=str;
        })
    }
    var checkAll=$('#box .checkAll');
    function chk(target) {//复选框判断
        var cls=target.className;
        var flag = true;
        if (cls==='check'){//点击非全选复选框
            /*当存在一个复选框未选中，全选框为false*/
            for (var i = 0; i < trs.length; i++) {
                var checkbox = trs[i].cells[0].children[0];
                if (!checkbox.checked) {
                    flag = false;
                    break
                }
            }
            checkAll[0].checked = checkAll[1].checked = flag;
        }else {//点击全选复选框，所有复选框的状态保持一致
            for (var i = 0; i < trs.length; i++) {
                var checkbox = trs[i].cells[0].children[0];
                checkbox.checked = target.checked;
            }
            checkAll[0].checked = checkAll[1].checked = target.checked;
        }
    }

上一篇： MD5加密、解密的简单java实现

下一篇： 考试总结

推荐阅读