JavaScript.07.购物车案例（含源代码）

最新推荐文章于 2024-07-30 17:19:26 发布

Champion_me

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量894

点赞数 6

文章标签： javascript css3 html

本文链接：https://blog.csdn.net/Champion_me/article/details/123446364

版权

购物车图片
在这里插入图片描述
购物车案例源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="">
    <tr>
        <td>全选<input type="checkbox" onclick="selectAll(this.checked)"></td>
        <td>名称</td>
        <td>单价</td>
        <td>个数</td>
        <td>总价</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍓🍓🍓</td>
        <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">10.00</td>
        <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
        <td class="sum">10.00</td>
        <td>
            <button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
            <button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
            <button onclick="delRow(this.parentElement.parentElement)">删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍉🍉🍉</td>
        <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">10.00</td>
        <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
        <td class="sum">10.00</td>
        <td>
            <button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
            <button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
            <button onclick="delRow(this.parentElement.parentElement)">删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍍🍍🍍</td>
        <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">10.00</td>
        <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
        <td class="sum">10.00</td>
        <td>
            <button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
            <button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
            <button onclick="delRow(this.parentElement.parentElement)"">删除</button>
    </tr>
</table>
<h1>总价: $<font color="green" id="allPrice">0.0</font></h1>
<button onclick="delCKRow()">删除所选的商品</button>
<script>

    //计算当前所有商品的总价
    function calcAll() {
        //获得页面中所有的行
        var rs=document.getElementsByTagName("tr")
        var sum=0;
        for(let i=1;i<rs.length;i++){
			console.log(rs.length)
            //rs[i]就是除了第一行之外的其他的行
            var s1=rs[i].getElementsByClassName("sum")[0].textContent
            sum+=parseFloat(s1)
        }
        //给页面赋值,只要小书店后两位
        allPrice.textContent=sum.toFixed(2)
    }

    //删除选中的行
    function delCKRow() {
        //获得页面中所有的行
        var rs=document.getElementsByTagName("tr")
        //将集合collection变成数组array
        rs=Array.from(rs)
        for(let i=1;i<rs.length;i++){
            //拿到行中对应的多选框
            var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]
            //判断多选框是否被选中
            if(ck.checked){
                //删除该行
                rs[i].outerHTML=""
            }
        }
        calcAll()
    }

    //全选功能
    function selectAll(status) {
        var is=document.querySelectorAll("input[type='checkbox']")
        for (let i of is){
            i.checked=status
        }
    }

    //按钮点击删除该行
    function delRow(tr) {
        tr.outerHTML=""
        calcAll()
    }

    //页面数值变化重新计算价格
    function calcRow(rex,tr) {
        //rex是运算符号
        //tr是当前对应的行
        var td=tr.getElementsByClassName("count")[0]
        if(rex==="+"){
            td.textContent=td.textContent*1+1
        }
        if(rex==="-"){
            td.textContent-=1
        }
        calc(tr)
    }

    //写一个函数：算出当前一行中的价格并完成赋值
    function calc(tr) {
        //value只有在input或者select
        //其他的内容全部使用textContent,innerHTML
        var price=tr.getElementsByClassName("price")[0].textContent
        var count=tr.getElementsByClassName("count")[0].textContent
        if(isNaN(price*1)){
            tr.getElementsByClassName("price")[0].textContent=0
            price=0
        }
        if(isNaN(count*1)){
            tr.getElementsByClassName("count")[0].textContent=0
            count=0
        }
        //使用单价*数量算出总价 并赋值给对应元素
        tr.getElementsByClassName("sum")[0].textContent=(price*count).toFixed(2)
        calcAll()
    }

    //窗口的加载事件  会在整个页面加载完成之后执行
    window.onload=()=>{
        //获得页面中所有的行
        var rs=document.getElementsByTagName("tr")
        for(let i=1;i<rs.length;i++){
            calc(rs[i])
        }
    }
</script>
</body>
</html>