JS实现的购物车案例

客官°小女子只卖身不卖艺 2022-03-21 14:28 413阅读 0赞

慕课网课程：[https://www.imooc.com/learn/34][https_www.imooc.com_learn_34]  
那里也有一些案例源码可以下载的。  
style.css文件

* {
        margin: 0;
        padding: 0;
    }
    a {
        color: #666;
        text-decoration: none;
    }
    body {
        padding: 20px;
        color: #666;
    }
    .fl{
        float: left;
    }
    .fr {
        float: right;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 0;
        text-align: center;
        width: 937px;
    }
    th, td {
        border: 1px solid #CADEFF;
    }
    th {
        background: #e2f2ff;
        border-top: 3px solid #a7cbff;
        height: 30px;
    }
    td {
        padding: 10px;
        color: #444;
    }
    tbody tr:hover {
        background: RGB(238,246,255);
    }
    .on {   
        background-color: RGB(224,222,225)；
    }
    .checkbox {
        width: 60px;
    }
    .goods {
        width: 300px;
    }
    .goods span {
        width: 180px;
        margin-top: 20px;
        text-align: left;
        float: left;
    }
    .price {
        width: 130px;
    }
    .count {
        width: 90px;
    }
    .count .add, .count input, .count .reduce {
        float: left;
        margin-right: -1px;
        position: relative;
        z-index: 0;
    }
    .count .add, .count .reduce {
        height: 23px;
        width: 17px;
        border: 1px solid #e5e5e5;
        background: #f0f0f0;
        text-align: center;
        line-height: 23px;
        color: #444;
    }
    .count .add:hover, .count .reduce:hover {
        color: #f50;
        z-index: 3;
        border-color: #f60;
        cursor: pointer;
    }
    .count input {
        width: 50px;
        height: 15px;
        line-height: 15px;
        border: 1px solid #aaa;
        color: #343434;
        text-align: center;
        padding: 4px 0;
        background-color: #fff;
        z-index: 2;
    }
    .subtotal {
        width: 150px;
        color: red;
        font-weight: bold;
    }
    .operation {
        width: 80px;
    }
    .operation span:hover, a:hover {
        cursor: pointer;
        color: red;
        text-decoration: underline;
    }
    img {
        width: 100px;
        height: 80px;
        /*border: 1px solid #ccc;*/
        margin-right: 10px;
        float: left;
    }
    
    .foot {
        width: 935px;
        margin-top: 10px;
        color: #666;
        height: 48px;
        border: 1px solid #c8c8c8;
        background-color: #eaeaea;
        background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
        position: relative;
        z-index: 8;
    }
    .foot div, .foot a {
        line-height: 48px;
        height: 48px;
    }
    .foot .select-all {
        width: 100px;
        height: 48px;
        line-height: 48px;
        padding-left: 5px;
        color: #666;
    }
    .foot .closing {
        border-left: 1px solid #c8c8c8;
        width: 100px;
        text-align: center;
        color: #000;
        font-weight: bold;
        background: RGB(238,238,238);
        cursor: pointer;
    }
    .foot .total{
        margin: 0 20px;
        cursor: pointer;
    }
    .foot  #priceTotal, .foot #selectedTotal {
        color: red;
        font-family: "Microsoft Yahei";
        font-weight: bold;
    }
    .foot .selected {
        cursor: pointer;
    }
    .foot .selected .arrow {
        position: relative;
        top:-3px;
        margin-left: 3px;
    }
    .foot .selected .down {
        position: relative;
        top:3px;
        display: none;
    }
     .show .selected .down {
        display: inline;
    }
     .show .selected .up {
        display: none;
    }
    .foot .selected:hover .arrow {
        color: red;
    }
    .foot .selected-view {
        width: 935px;
        border: 1px solid #c8c8c8;
        position: absolute;
        height: auto;
        background: #ffffff;
        z-index: 9;
        bottom: 48px;
        left: -1px;
        display:none;
    }
    .show .selected-view {
        display: block;
    }
    .foot .selected-view div{
        height: auto;
    }
    .foot .selected-view .arrow {
        font-size: 16px;
        line-height: 100%;
        color:#c8c8c8;
        position: absolute;
        right: 330px;
        bottom: -9px;
    }
    .foot .selected-view .arrow span {
        color: #ffffff;
        position: absolute;
        left: 0px;
        bottom: 1px;
    }
    #selectedViewList {
        padding: 20px;
        margin-bottom: -20px;
    }
    #selectedViewList div{
        display: inline-block;
        position: relative;
        width: 100px;
        height: 80px;
        border: 1px solid #ccc;
        margin: 10px;
    }
    #selectedViewList div span {
        display: none;
        color: #ffffff;
        font-size: 12px;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 60px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background: RGBA(0,0,0,.5);
        cursor: pointer;
    }
    #selectedViewList div:hover span {
        display: block;
    }

shopcart.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
        <link rel="stylesheet" href="css/style.css"/>
        <script type="text/javascript">
            window.onload = function () {
                var cartTable = document.getElementById('cartTable');
                var tr = cartTable.children[1].rows;
                var checkInputs = document.getElementsByClassName('check');
                var checkAllInputs = document.getElementsByClassName('check-all');
                var selectedTotal = document.getElementById('selectedTotal');
                var priceTotal = document.getElementById('priceTotal');
                var selected = document.getElementById('selected');
                var foot = document.getElementById('foot');
                var selectedViewList = document.getElementById('selectedViewList');
                var deleteAll = document.getElementById('deleteAll');
    
                // 扩展document.getElementsByClassName方法
                //为了兼容低版本的浏览器没有该方法适用于有多个类名
                if (!document.getElementsByClassName) {
                    document.getElementsByClassName = function (cls) {
                        var ret = [];
                        var els = document.getElementsByTagName('*');
                        for (var i = 0, len = els.length; i < len; i++) {
    
                            if (els[i].className.indexOf(cls + ' ') >=0 || els[i].className.indexOf(' ' + cls + ' ') >=0 || els[i].className.indexOf(' ' + cls) >=0) {
                                ret.push(els[i]);
                            }
                        }
                        return ret;
                    }
                }
                //计算函数getTotal，计算总价格，数目，并更新已选弹层的HTML
                function getTotal(){
                    var selected = 0;
                    var price = 0;
                    var HTMLsrc = "";
                    for (var i = 0; i < tr.length; i++) {
                        if(tr[i].getElementsByTagName("input")[0].checked){
                                tr[i].style.background='lightblue';
                                selected += parseInt(tr[i].getElementsByTagName('input')[1].value);
                                price += parseFloat(tr[i].cells[4].innerHTML);
                                HTMLsrc +=  '<div><img src="'+tr[i].getElementsByTagName('img')[0].src+'"><span class="del" index="'+i+'">取消选择</span></div>';
                        }else{
                            tr[i].style.background='';
                        }
                    }
                    selectedTotal.innerHTML = selected;
                    priceTotal.innerHTML = price.toFixed(2);//保留2位小数
                    selectedViewList.innerHTML = HTMLsrc;
    
                    if(selected == 0){
                        foot.className = "foot";
                    }
    
                }
                //小计价格函数getSubTotal
                function getSubTotal(tr){
                	var td = tr.cells;
                	var price = parseFloat(td[2].innerHTML);
                	var count = parseInt(tr.getElementsByTagName('input')[1].value);
                	var SubTotal = parseFloat(price * count);
                	td[4].innerHTML = SubTotal;
                }
                //绑定勾选框事件
                for(var i=0;i<checkInputs.length;i++){
                    checkInputs[i].onclick = function(){
                        if(this.className === "check-all check"){
                            for (var i = 0; i < checkInputs.length; i++) {
                                checkInputs[i].checked = this.checked;
                            }
                        }
                        if(this.checked == false){
                            for (var k = 0; k < checkAllInputs.length; k++) {
                                checkAllInputs[k].checked = false;
                            }
                        }
                        getTotal();
                    }
                    
                }
                //绑定已选按钮事件，用于显示或者隐藏浮层
                selected.onclick = function(){
                    if(foot.className === 'foot'){
                        if(selectedTotal.innerHTML != 0)
                        foot.className = 'foot show';
                    }
                    else{
                        foot.className = 'foot';
                    }
                }
                //在已选弹层上事件代理，用于删除已选
                selectedViewList.onclick = function(e){
                    var e = e||window.event;
                    var el = e.srcElement;
                    if(el.className == 'del'){
                        var index = el.getAttribute('index');
                        var input = tr[index].getElementsByTagName('input')[0];
                        input.checked = false;
                        input.onclick();
                    }
                }
                for (var i = 0; i < tr.length; i++) {
    
                    //表格每一行上事件代理
                    tr[i].onclick = function(e){
                    	e = e||window.event;
                    	var el = e.srcElement;
                    	var cls = el.className;
                    	var input = this.getElementsByTagName('input')[1];
                    	var reduce = this.getElementsByTagName('span')[1];
                    	var val = parseInt(input.value);
                    	switch(cls){
                    		case 'add':
                    			input.value = val + 1;
                    			reduce.innerHTML = '-';
                    			getSubTotal(this);
                    			break;
                    		case 'reduce':
                    			if(val>1){
                    				input.value = val - 1;
                    			}else{
                    				reduce.innerHTML = '';
                    			}
                    			getSubTotal(this);
                    			break;
                    		case 'delete':
                    			var conf = confirm('确定删除吗？');
                    			if(conf){
                    				this.parentNode.removeChild(this);
                    			}
                    			break;
                    		default:
                    			break;
                    	}
                    	getTotal();
                    }
                    //绑定数量输入框事件，实时更新小计价格
                    tr[i].getElementsByTagName('input')[1].onkeyup = function(){
                    	var val = parseInt(this.value);
                    	var tr = this.parentNode.parentNode;
                    	var reduce = tr.getElementsByTagName('span')[1];
                    	if(val<1 || isNaN(val)){
                    		val = 1;
                    	}
                    	this.value = val;
                    	if(val <= 1){
                    		reduce.innerHTML = '';
                    	}else{
                    		reduce.innerHTML = '-';
                    	}
                    	getSubTotal(tr);
                    	getTotal();
                    }     
                }
                // 绑定删除按钮事件， 删除已选项
                deleteAll.onclick = function(){
                	if(selectedTotal.innerHTML != '0'){
                		var conf = confirm('确定删除吗？');
                		if(conf){
    	            		for (var i = 0; i < tr.length; i++) {
    	            			var input = tr[i].getElementsByTagName('input')[0];
    	            			if(input.checked){
    	            				tr[i].parentNode.removeChild(tr[i]);
    	            				i--;
    	            			}
    	            		}
    	            	}
                	}
                }
                // 默认选择所有商品
                
                checkAllInputs[0].onclick();          
            }
        </script>
    </head>
    <body>
    <table id="cartTable">
        <thead>
        <tr>
            <th><label><input class="check-all check" type="checkbox"/> 全选</label></th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="http://img.mukewang.com/53b4c12b0001b0a702200220.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
            <td class="price">5999.88</td>
            <td class="count">
                <span class="reduce"></span>
                <input class="count-input" type="text" value="1"/>
                <span class="add">+</span></td>
            <td class="subtotal">5999.88</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="http://img.mukewang.com/53b4c149000144b202200220.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
            <td class="price">3888.50</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">3888.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="http://img.mukewang.com/53b4c16000011dfd02200220.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
            <td class="price">1428.50</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">1428.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="http://img.mukewang.com/53b4c12b0001b0a702200220.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
            <td class="price">640.60</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">640.60</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        </tbody>
    </table>
    
    <div class="foot" id="foot">
        <label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选</label>
        <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
        <div class="fr closing">结 算</div>
        <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">已选商品
            <span id="selectedTotal">0</span>件
            <span class="arrow up">︽</span>
            <span class="arrow down">︾</span>
        </div>
        <div class="selected-view">
            <div id="selectedViewList" class="clearfix">
                
            </div>
            <span class="arrow">◆<span>◆</span></span>
        </div>
    </div>
    </body>
    </html>

[https_www.imooc.com_learn_34]: https://www.imooc.com/learn/34