javascript+css+html购物车案例-Toy模板网

这篇具有很好参考价值的文章主要介绍了javascript+css+html购物车案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

javascript代码部分主要实现三部分功能

1、商品数量增加（减少）同时小计增加（减少）

这部分主要是通过for循环给增加（减少）按钮绑定点击事件

1）点击后计数器自增（自减）

2）计数器数量*对应商品单价赋值给对应商品小计（涉及到数据类型转换）

parseInt('12ccc') → 12 （该方法常用于截断数值后面的单位）

2、封装一个用于计算总价和总量的函数

1）利用循环函数获取页面所有商品的小计和与数量和

2）将封装函数写进增加（减少）按钮绑定事件里面，使得每次点击都会重新计算小计与数量

注意：该函数要写在for循环外面

3、删除功能

1）给每个删除事件都要绑定一个点击事件，因此可以与增加减少按钮写在一个循环体内

2）这里主要用到了 父元素.removeChild（子元素）这个方法，这里要分清楚谁是父元素，谁是子元素，一定要找最近的父元素，不要混淆，而且要先获取父元素。

3）封装函数也要写在点击事件里面。

这里有个很容易出错的问题：就是删除该列商品后页面中的总价和总商品数量也需要发生对应的改变，因此封装函数需要重新去获取当前页面中的对应商品的数量以及小计，所以我们将获取元素的代码，写在封装函数里面，用于重新获取页面信息。参考局部变量与全局变量的作用域不同，因此不会互相影响。

html实现一个简单的购物车功能,前端js笔记,vscode,html,前端,css,javascript

购物车效果图如下所示：

html实现一个简单的购物车功能,前端js笔记,vscode,html,前端,css,javascript

css代码部分文章来源地址https://www.toymoban.com/news/detail-784568.html

* {
    margin: 0;
    padding: 0;
    }
    table {
        border-spacing: 0;
        border: 1px dashed #ccc;
        width: 600px;
        border-left: 0;
        border-right: 0;
        text-align: center;
        /* 让表格居中 */
        margin: 0 auto;
    }
    td {
        border-spacing: 0;
        border: 1px dashed #ccc;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        width: 100px;
        height: 100px;
    }
    th {
        border-spacing: 0;
        border: 1px dashed #ccc;
        border-left: 0;
        border-right: 0;
    }
    
    ul {
     display: flex;
     justify-content: center;
    }

    li {
    display: flex;
     float: left;
     list-style: none;
     justify-content: center;
   }

   .input {
    height: 15px;
    width: 35px;
    text-align: center;
    background-color: whitesmoke;
    border: 1px solid darkred;
    padding: 0;
    margin: 0;
    line-height: 15px;
   }

   .add {
    height: 17px;
    width: 10px;
    text-align: center;
    background-color: darkred;
    text-align: center;
    color: white;
    line-height: 15px;
    padding: 0;
    margin: 0;
    border:1px solid darkred;
   }

   .reduce {
    height: 17px;
    width: 10px;
    text-align: center;
    background-color: darkred;
    text-align: center;
    color: white;
    line-height: 15px;
    padding: 0;
    margin: 0;
    border:1px solid darkred;
   }

   .foot {
    border: 1px solid #ccc;
    border-top: 0;
    width: 600px;
    height:50px;
    margin: 0 auto;
   }

   .jiesuan {
    height:50px;
    background-color: darkred;
    width: 70px;
    color:white;
    border: 0;
    font-size: 15px;
   }

   .bottom {
    font-size: 15px;
    float:right;
   }

   .jiesuan:hover {
    background-color: plum
   }

   #totalNum {
    color: darkred;
   }

   #total_price {
    color: darkred;
   }
    
   .item:hover {
    background-color: whitesmoke;
   }
   
   .item {
    height: 100px;
   }

html代码部分

<!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>购物车案例</title>
    <link rel="stylesheet" href="shoppingcar.css">
</head>
<body>
    <table>
        <tr>
         <th><input type="checkbox" class="all">全选</th>
         <th>商品</th>
         <th>单价</th>
         <th>商品数量</th>
         <th>小计</th>
         <th>操作</th>
        </tr>
        <tbody id="carBody">
        <tr class="item">
            <td><input type="checkbox" class="liu"></td>
            <td><img src="./image/1.jpg" width="50%"></td>
            <td class="price">20¥</td>
            <td>
                <ul class="num">
                    <li >
                        <button class="add">+</button>
                    </li>
                    <li class="count">
                        <input type="text" class="input" value="1" readonly>
                    </li>
                    <li >
                        <button class="reduce" disabled>-</button>
                    </li>
                </ul>
            </td>
            <td class="total">1</td>
            <td class="del"><button>删除</button></td>
        </tr>

        <tr class="item">
            <td>
                <input type="checkbox" class="liu">
            </td>
            <td>
                <img src="./image/2.jpg" width="50%">
            </td>
            <td class="price">30¥</td>
            <td>
                <ul class="num">
                    <li >
                        <button class="add">+</button>
                    </li>
                    <li  class="count">
                        <input type="text" class="input" value="1" readonly>
                    </li>
                    <li >
                        <button class="reduce" disabled>-</button>
                    </li>
                </ul>
            </td>
            <td class="total">1</td>
            <td class="del"><button>删除</button></td>
        </tr>

        <tr class="item">
            <td><input type="checkbox" class="liu">
            </td>
            <td>
                <img src="./image/3.jpg" width="50%">
            </td>
            <td class="price">40¥</td>
            <td>
                <ul class="num">
                    <li >
                        <button class="add">+</button>
                    </li>
                    <li class="count">
                        <input type="text" class="input" value="1" readonly>
                    </li>
                    <li >
                        <button class="reduce" disabled>-</button>
                    </li>
                </ul>
            </td>
            <td class="total">1</td>
            <td class="del"><button>删除</button></td>
        </tr>

        <tr class="item">
            <td><input type="checkbox" class="liu">
            </td>
            <td>
                <img src="./image/4.jpg" width="50%">
            </td>
            <td class="price">50¥</td>
            <td>
                <ul class="num">
                    <li >
                        <button class="add">+</button>
                    </li>
                    <li  class="count">
                        <input type="text" class="input" value="1" readonly>
                    </li>
                    <li >
                        <button  class="reduce" disabled>-</button>
                    </li>
                </ul>
            </td>
            <td class="total">1</td>
            <td class="del"><button>删除</button></td>
        </tr>
       </tbody>
     </table>
     <div class="foot">
        <div class="bottom">
        已经选中<i id="totalNum">0</i>件商品&nbsp;&nbsp;&nbsp;商品总价为:<i id="total_price">0¥</i>
       <button class="jiesuan">去结算</button>
       </div>
     </div>

</body>
    <script>
        let adds = document.querySelectorAll('.add')
        let reduces = document.querySelectorAll('.reduce')
        let prices =document.querySelectorAll('.price')
        let total_price = document.querySelector('#total_price')
        let totalNum = document.querySelector('#totalNum')
        let dels = document.querySelectorAll('.del')
        let totals =document.querySelectorAll('.total')
        let inputs = document.querySelectorAll('.input')
        // 获取父元素
        let carBody = document.querySelector('#carBody')
        let liu = document.querySelectorAll('.liu')
        let all = document.querySelector('.all')
        
        all.addEventListener('click',function(){
            for(let i = 0; i < liu.length; i++){
                liu[i].checked = all.checked
            }
        })

        for( let i = 0; i < adds.length ; i++){
              totals[i].innerHTML = prices[i].innerHTML
               // 增加
              adds[i].addEventListener('click',function(){
              inputs[i].value++
              reduces[i].disabled = false
              totals[i].innerHTML = parseInt(prices[i].innerHTML)*inputs[i].value + '¥'
             // 计算现在总额
             sumMoney()
             })
              // 减少
              reduces[i].addEventListener('click',function(){
              inputs[i].value--
              totals[i].innerHTML = parseInt(prices[i].innerHTML)*inputs[i].value + '¥'
               if(inputs[i].value <= 1) {
                reduces[i].disabled = true
               }
              // 计算现在总额
              sumMoney()
             })
             // 删除
              dels[i].addEventListener('click',function(){
                 // 父元素.removeChild（子元素）
                 carBody.removeChild(this.parentNode)
                 sumMoney()
              })
            }
             
              // 总价 result函数
            function sumMoney(){
                let totals =document.querySelectorAll('.total')
                let inputs = document.querySelectorAll('.input')
                let num = 0
                let sum = 0
                for( let i = 0; i < totals.length; i++){
                    sum = sum + parseInt(totals[i].innerHTML)
                    num = num + Number(inputs[i].value)
                }
                total_price.innerHTML = sum + '¥'
                totalNum.innerHTML = num
              }
              sumMoney()
    </script>
</html>

到了这里，关于javascript+css+html购物车案例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！