• 技术文章 >web前端 >js教程

    javascript怎么实现购物车效果

    藏色散人藏色散人2021-09-10 11:27:44原创115

    javascript实现购物车效果的方法:1、使用table来进行界面布局;2、自行封装getClasses函数;3、通过js实现选中和全选商品,以及商品数量的增减等功能即可。

    本文操作环境:windows7系统、javascript1.8.5版,DELL G3电脑

    javascript怎么实现购物车效果?

    用javascript实现的购物车实例

    基于javascript实现的购物车实例:

    首先是效果和功能,如下图所示,具有购物车的基本功能。

    包括1、选中和全选商品;2、商品数量的增减;3、单个商品价格的计算;4、总价的计算;5、删除商品。

    c4f43f08c587dde14cfb56345dff4fd.png

    一、界面布局

    使用的是table来进行布局,由于用js来获取tr 和 td节点的时候,可以获取带下标的元素集合,操作起来较为便利。

    html+css的代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
        <style>
            *{margin:0px; padding:0px;}
            table,td,td{
                border:1px solid #000000;
                font-size:10px;
            }
            table{
                display: block;
            }
    
            img{
                float:left;
            }
            tr{
                text-align: center;
            }
            #box{
                width:900px;
            }
    
            #cart{
                float:left;
                border-collapse:collapse;
            }
            #head{
                background:#F0FFFF;
            }
            #settlement{
                margin-top:20px;
                width:805px;
                height:30px;
                border:1px solid #EBEBEB;
                float:left;
                background: #EBEBEB;
    
                font-size:10px;
                line-height:30px ;
            }
            #settlement div{
                float:left;
            }
            #addupto{
                color:#ff0000;
                font-weight:700;
            }
            #NumofGoods{
                color:#ff0000;
                font-weight:700;
            }
    
            .goods{
                padding:5px;
                text-align: left;
            }
            .number{
                position:relative;
                left:19px;
                width:60px;
                height:10px;
                border:1px solid #cccccc;
            }
    
            .acc{
                width:40px;
                height:10px;
                border-left:0px solid #cccccc;
                border-right:0px solid #cccccc;
                line-height: 10px;
                float:left;
            }
            .desymbol{
                width:10px;
                height:10px;
                line-height: 10px;
                background:#ccc;
                float:left;
                cursor:pointer;
            }
            .adsymbol{
                width:10px;
                height:10px;
                line-height: 10px;
                background:#ccc;
                float:right;
                cursor: pointer;
            }
            /*.dele{
                cursor: pointer;
            }*/
            .total{
                color:#ff0000;
                font-weight:700;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <table id="cart">
            <tr id="head">
                <td width="50px"><input type="checkbox">  全选</td>
                <td width="400px;">商品</td>
                <td width="100px">单价</td>
                <td width="100px">数量</td>
                <td width="100px">小计</td>
                <td width="50px">操作</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td><img src="img/goods1.jpg">外星人笔记本电脑17 R4 15R3 13寸 17寸 alienware今晚吃鸡游戏本</td>
                <td>12888.00</td>
                <td>
                    <div>
                        <div>-</div>
                        <div>1</div>
                        <div>+</div>
                    </div>
                </td>
                <td></td>
                <td>删除</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td><img src="img/goods2.jpg">任天堂(Nintendo)Switch 家用游戏机 掌机NS智能体感游戏主机</td>
                <td>2258.00</td>
                <td>
                    <div>
                        <div>-</div>
                        <div>1</div>
                        <div>+</div>
                    </div>
                </td>
                <td></td>
                <td>删除</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td><img src="img/goods3.jpg">Microsoft/微软 Surface Pro i5 8G 256G 笔记本平板电脑二合一</td>
                <td>4999.00</td>
                <td>
                    <div>
                        <div>-</div>
                        <div>1</div>
                        <div>+</div>
                    </div>
                </td>
                <td></td>
                <td>删除</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td><img src="img/goods4.jpg">Apple/苹果 10.5 英寸 iPad Pro</td>
                <td>3666.00</td>
                <td>
                    <div>
                        <div>-</div>
                        <div>1</div>
                        <div>+</div>
                    </div>
                </td>
                <td></td>
                <td>删除</td>
            </tr>
        </table>
    
        <div id="settlement">
            <div style="width:550px"><input type="checkbox">    全选</div>
            <div style="width:120px">全选商品<span id="NumofGoods"></span><span>件^</span></div>
            <div style="width:80px">合计:¥<span id="addupto"></span></div>
            <div style="width:50px;text-align: center;border-left:1px solid #000000;">结算</div>
        </div>
    
    </div>
    
    <script src="cart.js"></script>
    </body>
    </html>

    二、javascript代码

    自行封装了getClasses()函数,避免兼容性问题。

    var prices = getClasses("price"),
        cart = document.getElementById("cart");
        acc = getClasses("acc"),
        totals = getClasses("total"),
        detracts = getClasses("desymbol"),
        adds = getClasses("adsymbol"),
        NumofGoods = document.getElementById("NumofGoods"),
        addupto = document.getElementById("addupto"),
        allSelect = getClasses("allSelect"),
        select = getClasses("select"),
        dele = getClasses("dele");
    
    count();
    countAll();
    
    for(var i=0; i<allSelect.length; i++ ){
        allSelect[i].onclick = function(){
            for(var j=0; j<select.length; j++){
                select[j].checked = this.checked;
            }
            for(j=0; j<allSelect.length; j++){
                allSelect[j].checked = this.checked;
            }
            //每次点击选框就计算一次总价
            countAll();
        }
    }
    
    for(i=0; i<select.length; i++){
        select[i].onclick = function(){
            if(ifAllSelected()){
                for(j=0; j<allSelect.length; j++){
                    allSelect[j].checked = true;
                }
            }
            if(ifNotAllSelected()){
                for(j=0; j<allSelect.length; j++){
                    allSelect[j].checked = false;
                }
            }
            countAll();
        }
    }
    
    for(i=0; i<adds.length; i++){
    
        adds[i].onclick = function(){
            console.log(this.parentNode.childNodes[3].innerHTML);
            var num = parseInt(this.parentNode.childNodes[3].innerHTML);
            num += 1;
            this.parentNode.childNodes[3].innerHTML = num;
            count();
            countAll();
        }
        detracts[i].onclick = function(){
            var num = parseInt(this.parentNode.childNodes[3].innerHTML);
            num -= 1;
            if(num<1){
                num=1;
            }
            this.parentNode.childNodes[3].innerHTML = num;
            count();
            countAll();
        }
        //删除时也应该重新计算总价,或者先判断商品是否被选中,有选中则重新计算
        dele[i].onclick = function(){
            cart.childNodes[1].removeChild(this.parentNode);
            countAll();
        }
    }
    
    //避免兼容性问题,自行封装classname
    function getClasses(className){
        var arr = [],
            nodes = document.getElementsByTagName("*");
        for(var i=0; i<nodes.length; i++){
            if(nodes[i].className == className){
                arr.push(nodes[i]);
            }
        }
        return arr;
    }
    
    //进行单价的计算,保留两位小数
    function count(){
        for(var i=0; i<prices.length; i++){
            totals[i].innerHTML = (prices[i].innerHTML*acc[i].innerHTML).toFixed(2);
        }
    }
    //计算总价的函数
    function countAll(){
        var num1=0;
        var num2=0;
        //注意,每次计算总价应该重新取得一次select,acc和totals,因为执行删除操作时,会让这几个值发生变化
        var select = getClasses("select"),
            acc = getClasses("acc"),
            totals = getClasses("total");
        for(var i=0; i<select.length; i++){
            if(select[i].checked == true){
                num1 += parseInt(acc[i].innerHTML);
                num2 += parseFloat(totals[i].innerHTML);
            }
        }
        NumofGoods.innerHTML = num1;
        addupto.innerHTML = num2;
    }
    
    //判断是否全部选中或者全部没有选中的函数
    function ifAllSelected(){
        var allSelected = true;
    
        for(var i=0; i<select.length; i++){
            if(select[i].checked == false){
                allSelected = false;
            }
        }
        return allSelected;
    }
    function ifNotAllSelected(){
        var notAllSelected = false;
        for(var i=0; i<select.length; i++){
            if(select[i].checked == false){
                notAllSelected = true;
            }
        }
        return notAllSelected;
    }

    推荐学习:《javascript基础教程

    以上就是javascript怎么实现购物车效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript
    上一篇:15个值得收藏的实用JavaScript代码片段(项目必备) 下一篇:es6数组方法有什么
    线上培训班

    相关文章推荐

    • php购物车功能如何实现• php如何实现简单购物车• 利用html来制作一个简单美观的购物车界面• JavaScript怎么实现购物车结算

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网