淘宝购物车web页面模仿

采用HTML+CSS+原生JS手写，未使用组件开发。

效果图如下：

 初始页面效果

目前可以实现动态添加商品，通过随机函数生成随机数，从已有的数据中选择商品数据添加到页面，生成的商品可以从列表中删除；

随机添加商品 

删除商品 

window.onload = function() {
    //商品信息，可以使用ajax请求后台数据
    let data = [
        {
            shopName:"古风衣装",
            imgUrl:"./img/items1.jpg",
            itemTxt:"扇子男生霸气中国风古装复古大号折叠扇随身汉服配饰古风折扇",
            type:"颜色分类",
            typeChoice:"10存且试天下+流苏10存且试天下+流苏10存且试天下+流苏",
            priceOld:"49.00",
            priceNew:"25.60"
        },
        {
            shopName:"旁氏旗舰店",
            imgUrl:"./img/items2.jpg",
            itemTxt:"旁氏氨基酸系洗面奶米粹竹炭樱粉洁面乳深层清洁毛孔洁面乳正品女",
            type:"颜色分类",
            typeChoice:"米粹洁面150g*2",
            priceOld:"73.20",
            priceNew:"64.90"
        },
        {
            shopName:"海澜之家",
            imgUrl:"./img/items3.jpg",
            itemTxt:"高级感巴洛克衬衫男设计感小众情侣冰丝长袖衬衣夏季薄款外套潮牌",
            type:"颜色分类",
            typeChoice:"白色长袖2XL",
            priceOld:"90.00",
            priceNew:"68.87"
        },
        {
            shopName:"阿里大药房",
            imgUrl:"./img/items4.jpg",
            itemTxt:"明康欣阿达帕林凝胶祛痘膏30g*1支/盒正品痤疮正品保证丘疹粉刺",
            type:"套餐类型",
            typeChoice:"标准装",
            priceOld:"53.20",
            priceNew:"39.20"
        },
        {
            shopName:"阿里大药房",
            imgUrl:"./img/items4.jpg",
            itemTxt:"明康欣阿达帕林凝胶祛痘膏30g*1支/盒正品痤疮正品保证丘疹粉刺",
            type:"套餐类型",
            typeChoice:"标准装",
            priceOld:"53.20",
            priceNew:"39.20"
        }
    ];
    //随机函数
    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min) ) + min;
    }
    let main_con = document.querySelector('main .tb_main_content');
    let add_btn = document.querySelector('.add_btn .btn-default');
    let title_num = document.querySelector('main .tb_main_title span')
    add_btn.addEventListener('click',()=>{
        let i = getRndInteger(0,data.length);
        let div_item = document.createElement('div');
        div_item.setAttribute('class', 'tb_main_content_items');
        //将div内容以模板字符串形式赋给div_item
        div_item.innerHTML = `
            

                
                
                店铺：
                ${data[i].shopName}
            
            

                

                    

                        
                        
                    
                    

                        

                            
                            

                                
${data[i].itemTxt}
                                

                                

                                    
                                    
                                    
                                
                            
                        
                    
                    

                        

                            ${data[i].type}：
                            
${data[i].typeChoice}
                        
                    
                    

                        

                            

                                ￥
                                ${data[i].priceOld}
                            
                            

                                ￥
                                ${data[i].priceNew}
                            
                        
                    
                    

                        

                            

                                -
                                
                                +
                            
                        
                    
                    

                        

                            ￥
                            ${data[i].priceNew}
                        
                    
                    

                        
移入收藏夹
                        
删除
                    
                
            
        `;
        //将单个商品信息的div_item追加给父元素main_con
        main_con.insertBefore(div_item,main_con.children[0]);
        //获取元素
        let priceNew = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_prices .prices-content .prices-new em');
        let Minus = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_amounts a.Minus');
        let input = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_amounts input');
        let Plus = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_amounts a.Plus');
        let prices = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_sum-number span');
        let del = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_handle  a .handle_del');
        Minus.addEventListener('click', ()=>{
            if(input.value <= 1){   //<=具有隐式转换
                Minus.disabled = true;
            }else{
                input.value--;
            }
            // prices.innerHTML = (+priceNew.priceNew * +input.value).toFixed(2).toString();
            // console.log(input.value,typeof input.value);
        });
        Plus.addEventListener('click', ()=>{
            input.value++;
            Minus.disabled = false;
            // prices.innerHTML = (+priceNew.priceNew * +input.value).toFixed(2).toString();
            // console.log(input.value,typeof input.value);
        });
        del.addEventListener('click', ()=>{
            let msg = '确认要删除该商品吗？';
            if(confirm(msg) === true){
                main_con.removeChild(div_item);
                title_num.innerHTML = `购物车（全部${main_con.children.length-1}）`;
            }else{
                return false;
            }
        });
        title_num.innerHTML = `购物车（全部${main_con.children.length-1}）`;
        // console.log(main_con.children.length-1);
    });
}

尚未实现的功能：复选框的选择链，金额的计算。

项目代码链接：https://github.com/NLP-LZ/cristine.github.io