JS购物车--纯

编程语言 2018-09-05 05:11:22 阅读次数: 0

花了半天的时间扣了一个购物车，以下是效果图及源码：这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/car_demo.css"/>
    </head>
    <body>
        <div class="main">
            <ul class="title">
                <li>
                    <input id="checkAll" type="checkbox" />
                    <span>全选</span>
                </li>
                <li>商品</li>
                <li>单价</li>
                <li>数量</li>
                <li>小计</li>
                <li>操作</li>
            </ul>
            <ul class="list">
                <li data-id="11">
                    <div class="list_item check">
                        <input class="checkone" type="checkbox" />
                    </div>
                    <div class="list_item goods">
                        <div class="pickture"><img src="images/111.png"/></div>
                        <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
                    </div>
                    <div class="list_item price">￥<span class="priceone">1000.00</span></div>
                    <div class="list_item number">
                        <input class="reduce" type="button" value="-" />
                        <input class="numbox" type="text" value="1" />
                        <input class="plus" type="button" value="+" />
                    </div>
                    <div class="list_item subtotal"></div>
                    <div class="list_item delete">删除</div>
                </li>
                <li data-id="22">
                    <div class="list_item check">
                        <input class="checkone" type="checkbox" />
                    </div>
                    <div class="list_item goods">
                        <div class="pickture"><img src="images/222.png"/></div>
                        <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
                    </div>
                    <div class="list_item price">￥<span class="priceone">2000.00</span></div>
                    <div class="list_item number">
                        <input class="reduce" type="button" value="-" />
                        <input class="numbox" type="text" value="1" />
                        <input class="plus" type="button" value="+" />
                    </div>
                    <div class="list_item subtotal"></div>
                    <div class="list_item delete">删除</div>
                </li>
                <li data-id="33">
                    <div class="list_item check">
                        <input class="checkone" type="checkbox" />
                    </div>
                    <div class="list_item goods">
                        <div class="pickture"><img src="images/333.png"/></div>
                        <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
                    </div>
                    <div class="list_item price">￥<span class="priceone">3000.00</span></div>
                    <div class="list_item number">
                        <input class="reduce" type="button" value="-" />
                        <input class="numbox" type="text" value="1" />
                        <input class="plus" type="button" value="+" />
                    </div>
                    <div class="list_item subtotal"></div>
                    <div class="list_item delete">删除</div>
                </li>
                <li data-id="44">
                    <div class="list_item check">
                        <input class="checkone" type="checkbox" />
                    </div>
                    <div class="list_item goods">
                        <div class="pickture"><img src="images/444.png"/></div>
                        <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
                    </div>
                    <div class="list_item price">￥<span class="priceone">4000.00</span></div>
                    <div class="list_item number">
                        <input class="reduce" type="button" value="-" />
                        <input class="numbox" type="text" value="1" />
                        <input class="plus" type="button" value="+" />
                    </div>
                    <div class="list_item subtotal"></div>
                    <div class="list_item delete">删除</div>
                </li>
                <li data-id="55">
                    <div class="list_item check">
                        <input class="checkone" type="checkbox" />
                    </div>
                    <div class="list_item goods">
                        <div class="pickture"><img src="images/555.png"/></div>
                        <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
                    </div>
                    <div class="list_item price">￥<span class="priceone">5000.00</span></div>
                    <div class="list_item number">
                        <input class="reduce" type="button" value="-" />
                        <input class="numbox" type="text" value="2" />
                        <input class="plus" type="button" value="+" />
                    </div>
                    <div class="list_item subtotal"></div>
                    <div class="list_item delete">删除</div>
                </li>
            </ul>
            <ul class="foot">
                <li id="removes">删除</li>
                <li>
                    已选商品<span id="checknum">0</span>件&nbsp;&nbsp;&nbsp;&nbsp;
                    合计：￥<span id="allPrice">0</span>
                </li>
                <li id="payfor">结算</li>
            </ul>
        </div>
        <script type="text/javascript">
            window.onload=function(){
                var listArr = document.querySelector('.list');              //列表
                var oLi = listArr.getElementsByTagName('li');               //获取行
                var checkAll = document.getElementById('checkAll');         //全选
                var checkOne = document.querySelectorAll('.checkone');      //单选
                var priceOne = document.querySelectorAll('.priceone');      //单价
                var goodsNum = document.querySelectorAll('.numbox');        //单个商品数量
                var reduceBtn = document.querySelectorAll('.reduce');       //数量减
                var plusBtn = document.querySelectorAll('.plus');           //数量加
                var subtotalPrice = document.querySelectorAll('.subtotal'); //小计
                var deleteBtn = document.querySelectorAll('.delete');       //单个删除
                var removesBtn = document.getElementById('removes');        //多个删除
                var checkNum = document.getElementById('checknum');         //件数
                var allPrice = document.getElementById('allPrice');         //总价

                total_price();
                var num;
                var price_all = 0;
                var idArry = [];

                //小计
                function total_price(){
                    for(var i=0;i<priceOne.length;i++){ 
                        var oneNum = priceOne[i].parentNode.parentNode.getElementsByClassName('numbox')[0].value;
                        var onePrice = priceOne[i].parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML;
                        var oneTotal = priceOne[i].parentNode.parentNode.getElementsByClassName('subtotal');
                        oneTotal[0].innerHTML = parseInt(oneNum)*parseFloat(onePrice);
                    }
                }

                //数量减
                for(var i=0;i<reduceBtn.length;i++){
                    reduceBtn[i].onclick = function(){
                        num = parseInt(this.parentNode.parentNode.getElementsByClassName('numbox')[0].value);
                        if(num<=1){
                            this.disabled = true;
                            return false;
                        }
                        num --;
                        this.parentNode.parentNode.getElementsByClassName('numbox')[0].value = num;
                        total_price();
                        if(this.parentNode.parentNode.getElementsByClassName('checkone')[0].checked){
                            allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML);
                        }
                    }
                }

                //数量加
                for (var i=0;i<plusBtn.length;i++) {
                    plusBtn[i].onclick = function(){
                        num = parseInt(this.parentNode.parentNode.getElementsByClassName('numbox')[0].value);
                        num ++;
                        if(num>1){
                            this.parentNode.parentNode.getElementsByClassName('reduce')[0].disabled = false;
                        }
                        this.parentNode.parentNode.getElementsByClassName('numbox')[0].value = num;
                        total_price();
                        if(this.parentNode.parentNode.getElementsByClassName('checkone')[0].checked){
                            allPrice.innerHTML = parseFloat(allPrice.innerHTML)+parseFloat(this.parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML);
                        }
                    }
                }

                //总价
                function priceAll(){
                    for(var i=0;i<checkOne.length;i++){
                        if(checkOne[i].checked){
                            price_all += parseFloat(checkOne[i].parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML);
                            allPrice.innerHTML = price_all;
                        }else{price_all = 0;}
                    }
                    return price_all;
                }

                //删除数组元素
                function remove(arr,val) {
                    for(var i=0; i<arr.length; i++) {
                        if(arr[i] == val) {
                            arr.splice(i, 1);
                            break;
                        }
                    }
                    return arr;
                };
                //单选
                for (var i=0;i<checkOne.length;i++) {
                    checkOne[i].index = i;
                    checkOne[i].onclick = function(e){
                        var count = 0;
                        var dataId = this.parentNode.parentNode.getAttribute('data-id');
                        if(this.checked){
                            allPrice.innerHTML = parseFloat(allPrice.innerHTML)+parseFloat(this.parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML);
                            checkNum.innerHTML = parseInt(checkNum.innerHTML)+1;
                            idArry.push(dataId);
                        }else{
                            allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML);
                            checkNum.innerHTML = parseInt(checkNum.innerHTML)-1;
                            idArry = remove(idArry,dataId);
                        }
                        console.log(idArry)
                        for (var j = 0; j < checkOne.length; j++) {
                            if(checkOne[j].checked==true){
                                count++;
                            }
                            else{count-1}
                        } 
                        if(count == oLi.length){checkAll.checked = true;}
                        if(!this.checked){
                            checkAll.checked = false;
                            price_all = 0;
                        }
                    }
                }
                setTimeout(function() {  //延时自动触发全选事件
                    // IE
                    if(document.all) {
                        checkAll.click();
                    }
                    // 其它浏览器
                    else {
                        var e = document.createEvent("MouseEvents");
                        e.initEvent("click", true, true);
                        checkAll.dispatchEvent(e);
                    }
                }, 100);
                //全选
                checkAll.onclick = function(){
                    for(var i=0;i<checkOne.length;i++){
                        checkOne[i].checked=this.checked;
                    }
                    if(this.checked){
                        priceAll();
                        checkNum.innerHTML = checkOne.length;
                        for (var i = 0; i < oLi.length; i++) {
                            idArry.push(oLi[i].getAttribute('data-id'))
                        }
                    }
                    else{
                        priceAll();
                        allPrice.innerHTML = 0;
                        price_all = 0;
                        checkNum.innerHTML = 0;
                        idArry = [];
                    }
                    console.log(idArry)
                }

                //单删
                for(var i=0;i<deleteBtn.length;i++){
                    deleteBtn[i].onclick = function(){
                        var delets = confirm('确定删除所选商品吗？'); //弹出确认框
                        var dataId = this.parentNode.getAttribute('data-id');
                        if (delets) {
                            this.parentNode.className = 'list_act';
                            console.log(this.parentNode.className)
                            var that = this;
                            setTimeout(function(){
                                listArr.removeChild(that.parentNode); // 删除相应节点
                            },350)
                            if(this.parentNode.getElementsByClassName('checkone')[0].checked){
                                allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.getElementsByClassName('subtotal')[0].innerHTML);
                                checkNum.innerHTML = parseInt(checkNum.innerHTML)-1;
                                if(oLi.length==0){
                                    checkAll.checked = false;
                                }
                            }
                        }
                        if(idArry.indexOf(dataId)!=-1){
                            idArry = remove(idArry,dataId);
                        }
                        console.log(idArry)
                        if(idArry == ''){checkAll.checked = false;}
                    }
                }

                //多删
                removesBtn.onclick = function(){
                    if (checkNum.innerHTML != 0) {
                        var delets = confirm('确定删除所选商品吗？'); //弹出确认框
                        if (delets) {
                            for (var i = 0; i < oLi.length; i++) {
                                if (oLi[i].querySelectorAll('.checkone')[0].checked) {
                                    oLi[i].parentNode.removeChild(oLi[i]); // 删除相应节点
                                    i--; //回退下标位置
                                }
                            }
                            allPrice.innerHTML = 0;
                            checkNum.innerHTML = 0;
                            checkAll.checked = false;
                            idArry = [];
                        }
                    } else {
                        alert('请选择商品！');
                    }
                }

                //数目框输入事件
                for(var i=0;i<goodsNum.length;i++){
                    goodsNum[i].onkeyup = function(){
                        var val = parseInt(this.value);
                        if (isNaN(val) || val <= 0) {
                            val = 1;
                        }
                        if (this.value != val) {
                            this.value = val;
                        }
                        total_price();
                        priceAll()
                    }
                }
            }
        </script>
    </body>
</html>

css

*{font-family: Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "\u5FAE\u8F6F\u96C5\u9ED1", "WenQuanYi Micro Hei", sans-serif;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; } 
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; }
/*******     *******\
 *     *     *     *
 *  O  *     *  O  *
 *     *     *     *
 \******     ******/
.main{width:1000px;margin:100px auto;}
.title{zoom:1;border-top: 1px solid #FF5500;background-color: #fafafa;}
.title:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.title li{float:left;height:50px;line-height:50px;text-align:center;font-size: 16px;}
.title li:nth-child(1){width:100px;}
.title li:nth-child(2){width:350px;}
.title li:nth-child(3){width:130px;}
.title li:nth-child(4){width:160px;}
.title li:nth-child(5){width:130px;}
.title li:nth-child(6){width:130px;}
.list{zoom:1;}
.list li:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.list li{height:120px;text-align: center;transition: 0.5s;}
.list_act{animation: changeHeight .35s;}
@keyframes changeHeight{
    from{height:120px;}
    to{height:0px;}
}
.list li:hover{
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    transform: translate3d(0,-2px,0);
    transition: 0.5s;
    z-index: 9;
    position: relative;
}
.list li:hover .name{color:#FF5500;}
.list_item{height:120px;float: left;}
.check,.price,.subtotal,.delete,.number{line-height: 120px;text-align: center;}
.check{width:100px;}
.goods{width:350px;}
.price{width:130px;}
.number{width:160px;}
.subtotal{width:130px;}
.delete{width:130px;}
.list li:nth-child(even) {background: #fafafa;}
.goods{position: relative;}
.pickture{
    width:100px;
    height:100px;
    margin:10px;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
input[type='checkbox']{cursor: pointer;}
.pickture img{width:100%;}
.name{
    margin:40px auto auto 120px;
    height:40px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    line-height: 22px;
    text-align: left;
    cursor: pointer;
}
.price{color: #FF5500;}
.number input{height:20px;display: inline-block;vertical-align: middle;}
.number input[type='button']{
    width:20px;
    margin:auto 5px;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid #e3e3e3;
}
.number input[type='text']{width:60px;text-align: center;}
.delete{cursor: pointer;}
.delete:hover{color: #FF5500;}
.foot{zoom:1;border-top: 1px solid #FF5500;background-color: #fafafa;}
.foot:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.foot li{float:left;height:50px;line-height:50px;text-align:center;font-size: 16px;}
.foot li:nth-child(1){width:100px;cursor: pointer;}
.foot li:nth-child(2){width:770px;text-align: right;}
.foot li:nth-child(3){width:130px;cursor: pointer;}
.foot span{color: #FF5500;font-size: 20px;}
#removes:hover{color: #FF5500;}
#payfor:hover{color: #FF5500;}

之前做过JQ的购物车，一直想写一个纯js的购物车，所以就抽空码了一个，多有不足，阅览后请指教;

转载请说明出处附链接，谢谢~~~

猜你喜欢

转载自blog.csdn.net/qq_39085895/article/details/82377929
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022