javascript小米购物商城加入购物车

查看演示 下载资源 下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

以小米商品为例，加入购物车代码

<div id="box"> <ul> </ul> </div> <div id="car" class="car"> <div class="head_row hid"> <div class="img left">&nbsp;</div> <div class="name left">商品名称</div> <div class="price left">单价</div> <div class="ctrl left">操作</div> </div> </div>

window.onload = function() {
    var aData = [{"imgUrl": "images/img01.jpg", "proName": "小米移动电源10000mAh", "proPrice": "79", "proComm": "18"},
        {"imgUrl": "images/img02.jpg", "proName": "小米移动电源10000mAh 高配版", "proPrice": "149", "proComm": "1.4"},
        {"imgUrl": "images/img03.jpg", "proName": "小米圈铁耳机", "proPrice": "99", "proComm": "4.2"},
        {"imgUrl": "images/img04.jpg", "proName": "小米活塞耳机 基础版", "proPrice": "29", "proComm": "3.6"},
    ];
    var oBox = document.getElementById("box");
    var oCar = document.getElementById("car");
    var oUl = document.getElementsByTagName("ul")[0];
    for (var i = 0; i < aData.length; i++) {
        var oLi = document.createElement("li");
        var data = aData[i];
        oLi.innerHTML += '<div class="pro_img"><img src="' + data["imgUrl"] + '" width="150" height="150"></div>';
        oLi.innerHTML += '<h3 class="pro_name"><a href="#">' + data["proName"] + '</a></h3>';
        oLi.innerHTML += '<p class="pro_price">' + data["proPrice"] + '元</p>';
        oLi.innerHTML += '<p class="pro_rank">' + data["proComm"] + '万人评价</p>';
        oLi.innerHTML += '<div class="add_btn">加入购物车</div>';
        oUl.appendChild(oLi);
    }
    var aBtn = getClass(oBox, "add_btn");
    for (var i = 0; i < aBtn.length; i++) {
        aBtn[i].index = i;
        aBtn[i].onclick = function() {
            var oDiv = document.createElement("div");
            var data = aData[this.index];
            oDiv.className = "row hid";
            oDiv.innerHTML += '<div class="img left"><img src="' + data["imgUrl"] + '" width="80" height="80"></div>';
            oDiv.innerHTML += '<div class="name left"><span>' + data["proName"] + '</span></div>';
            oDiv.innerHTML += '<div class="price left"><span>' + data["proPrice"] + '元</span></div>';
            oDiv.innerHTML += '<div class="ctrl left"><a href="javascript:;">×</a></div>';
            oCar.appendChild(oDiv);
            var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
            delBtn.onclick = function() {
                oCar.removeChild(oDiv);
            }
        }
    }
    function getClass(oBox, tagname) {
        var aTag = oBox.getElementsByTagName("*");
        var aBox = [];
        for (var i = 0; i < aTag.length; i++) {
            if (aTag[i].className == tagname) {
                aBox.push(aTag[i]);
            }
        }
        return aBox
    }
}