js写的简单购物车2

Posted 2020-08-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js写的简单购物车2相关的知识，希望对你有一定的参考价值。

　今天周六，总结一下本周所学的知识，因为上次的购物车并没有写完，所以会更新给购物车添加功能。每一次写都会遇到不同的问题。

（1）html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="index.css">
    <script src="data.js"></script>
</head>
<body>
    <div class="shopCar">
        <div class="control">
            <input type="checkbox" value="" id="all">
            <label for="all">全选</label>
            <input type="button" value="按价格??">
        </div>
        <div class="list">
            <h3>商品</h3>
            <h3>购买数量</h3>
            <h3>单价</h3>
            <h3>小计</h3>
            <h3>操作</h3>
        </div>
        <ul>
            <li>
                <input type="checkbox">
                <h3>摩奥套装</h3>
                <div class="shuzhi">
                    <input class="minus" value="-">
                    <input type="text" num="" value="1">
                    <input class="add" value="+">
                </div>
                <span>￥：<i>99.00</i></span>
                <input type="text" class="xiaoji" >
                <div class="shanchu">
                    <a href="javascript:void(0)">删除</a>
                </div>
            </li>
            <li>
                <input type="checkbox">
                <h3>火锅底料</h3>
                <div class="shuzhi">
                    <input class="minus" value="-">
                    <input type="text" num="" value="1">
                    <input class="add" value="+">
                </div>
                <span>￥：<i>56.00</i></span>
                <input type="text" class="xiaoji" >
                <div class="shanchu ">
                    <a href="javascript:void(0)">删除</a>
                </div>
            </li>
            <li>
                <input type="checkbox">
                <h3>沐浴露</h3>
                <div class="shuzhi">
                    <input class="minus" value="-">
                    <input type="text" num="" value="1">
                    <input class="add" value="+">
                </div>
                <span>￥：<i>74.50</i></span>
                <input type="text" class="xiaoji" >
                <div class="shanchu ">
                    <a href="javascript:void(0)">删除</a>
                </div>
            </li>
            <li>
                <input type="checkbox">
                <h3>坚果</h3>
                <div class="shuzhi">
                    <input class="minus" value="-">
                    <input type="text" num="" value="1">
                    <input class="add" value="+">
                </div>
                <span>￥：<i>23.00</i></span>
                <input type="text" class="xiaoji">
                <div class="shanchu ">
                    <a href="javascript:void(0)">删除</a>
                </div>
            </li>
        </ul>
        <div class="last">
          <label for="allPrice">总计：</label>
          <input id="allPrice" type="text" value="0"> 
        </div>
    </div>
</body>
    <script src="index.js"></script>
</html>

（2）css样式代码

*{
    margin:0;
    padding:0;
    font-size:20px;
}
a{
    text-decoration: none;
}
ul{
    list-style:none;
}
.shopCar{
    margin-left:100px;
}
.control{
    height:50px;
    margin-bottom:20px;
}
.list{
    width:900px;
    height:50px;
    background:red;
}
.list>h3{
    width:165px;
    display:inline-block;
    text-align:center;
    line-height:50px;
}
.list h3:nth-child(1){
    margin-left:14px;
}
[type="button"]{
    border:none;
    height:50px;
    width:250px;
    border-radius:10px;
    outline:none;
    margin-left:50px;
}
ul li{
    width:900px;
    height:70px;
    background:snow;
    line-height:70px;
    border-bottom:1px red solid;
}
li >input{
    float:left;
    margin-top:30px;
}
li h3{
    width:165px;
    float:left;
    margin-left:20px;
    text-align:center;
}
li .shuzhi{
    width:165px;
    height:70px;
    float:left;
    text-align:center;
}
li .shuzhi input:nth-child(1){
    width:20px;
    text-align:center;
    background:lightgray;
    border:none;
}
li .shuzhi input:nth-child(2){
    width:40px;
    text-align:center;
}
li .shuzhi input:nth-child(3){
    width:20px;
    text-align:center;
    background:lightgray;
    border:none;
}
li >span{
    width:166px;
    text-align:center;
    float:left;
}
li .xiaoji {
    width:165px;
    float:left;
    text-align:center;
    outline:none;
    border:none;
}
li .shanchu {
    width:165px;
    float:left;
    text-align:center;
}
.last{
    margin-left:500px;
    margin-top:10px;
}
.last input{
    width:150px;
}

（3）data.js

var data={
    item:[{
        title:"摩奥套装",
        price:99.00,
        delete:"删除"
    },{
        title:"火锅底料",
        price:56.00,
        delete:"删除"
    },{
        title:"沐浴露",
        price:74.50,
        delete:"删除"
    },{
        title:"坚果",
        price:23.00,
        delete:"删除"
    }]
}

(4)index.js

var data = data;
var item = data.item;

function $(x){
    return document.querySelector(x);
}
function $s(x){
    return document.querySelectorAll(x);
}
var btns=$s("li [type=checkbox]");
var btn=$("#all");
var display=$("#allPrice");
var singlePrice =$s(".xiaoji");
var adds=$s(‘.add‘);
var minus=$s(‘.minus‘);
var shanchu=$s("li div a");
var Price = 0;

var xuanZhong = true;
var length = btns.length;

// 计算总数
function allPrice(){
    Price=0;
    for(var i=0;i<length;i++){
        if(btns[i].checked){
            Price += parseInt($s("[num=‘‘]")[i].value) * item[i].price;
         }
    }
    display.value=Price;
}
function xiaoji(){
    for(var i=0;i<item.length;i++){
        singlePrice[i].value = parseInt($s("[num=‘‘]")[i].value) * item[i].price;
    }
}

for(var i=0;i<item.length;i++){
        singlePrice[i].value = parseInt($s("[num=‘‘]")[i].value) * item[i].price;
}
// 点击全选按钮
btn.onclick=function(){
    for(var i=0;i<length;i++){
        btns[i].checked=this.checked;
    }
    if(this.checked){
        allPrice();
        xiaoji();
    }
    else{
        Price=0;
        display.value=0;
    }
}
// 添加商品数量和减少商品数量
for(var i=0;i<adds.length;i++){
    adds[i].index=i;
    minus[i].index=i;
    adds[i].onclick=function(){
        var num=$s("[num=‘‘]")[this.index].value;
        $s("[num=‘‘]")[this.index].value = ++num;
        btns[this.index].checked=true;
        allPrice();
        xiaoji();
        panduan();
    }
    minus[i].onclick=function(){
        var num=$s("[num=‘‘]")[this.index].value; 
        if(num <=1){
            $s("[num=‘‘]")[this.index].value = 1;
        }
        else{
            $s("[num=‘‘]")[this.index].value = --num;
            btns[this.index].checked=true;
        }
        allPrice();
        xiaoji();
        panduan();
    }
}

// 
for(var i=0;i<length;i++){
    btns[i].onclick=function(){
        panduan();
    }
}
function panduan(){
    for(var i=0;i<length;i++){
        var isTrue=true;
        if(btns[i].checked == false){
            btn.checked=false;
        }
        else if(btns[i].checked == true){
            for(var i=0;i<length;i++){
                if(btns[i].checked ==false){
                    isTrue=false;
                }
            }
            if(!isTrue){
                btn.checked=false;
            }
            else{
                btn.checked=true;
            }
        }
        allPrice();
        xiaoji();
    }
}

// 删除商品
for(var i=0;i<length;i++){
    shanchu[i].index=i;
    shanchu[i].onclick=function(){
        $s("li")[this.index].style.display="none";
        btns[this.index].checked=false;
        allPrice();
    }
}

// 价格排序
var button=$("[type=button]");
var ul=$("ul");
var html="";
var isUp=true;

button.onclick=function(){
    html="";
    if(isUp){
        var obj=up();
        this.value="按价格??";
        for(var i=0;i<obj.length;i++){
            html +="<li><input type=‘checkbox‘>"+
                "<h3>"+obj[i].title+"</h3>"+
                "<div class=‘shuzhi‘>"+
                    "<input class=‘minus‘ value=‘-‘>"+
                    "<input type=‘text‘ num=‘‘ value=‘1‘>"+
                    "<input class=‘add‘ value=‘+‘></div>"+
                "<span>￥：<i>"+obj[i].price+"</i></span>"+
                "<input type=‘text‘ class=‘xiaoji‘ value=‘0‘>"+
                "<div class=‘shanchu‘>"+
                "<a href=‘javascript:void(0)‘>"+obj[i].delete+"</a></div></li>"
        }
        ul.innerHTML=html;
        isUp=false;
    }
    else{
        html="";
        var obj=down();
        this.value="按价格??";
        for(var i=0;i<obj.length;i++){
            html +="<li><input type=‘checkbox‘>"+
                "<h3>"+obj[i].title+"</h3>"+
                "<div class=‘shuzhi‘>"+
                    "<input class=‘minus‘ value=‘-‘>"+
                    "<input type=‘text‘ num=‘‘ value=‘1‘>"+
                    "<input class=‘add‘ value=‘+‘></div>"+
                "<span>￥：<i>"+obj[i].price+"</i></span>"+
                "<input type=‘text‘ class=‘xiaoji‘ value=‘0‘>"+
                "<div class=‘shanchu‘>"+
                "<a href=‘javascript:void(0)‘>"+obj[i].delete+"</a></div></li>"
    }
    ul.innerHTML=html;
    isUp=true;
}

}
function up(){
    var obj = item.sort(function(a,b){
        return b.price-a.price;
    });
    return obj;
}
function down(){
    var obj = item.sort(function(a,b){
        return a.price-b.price;
    });
    return obj;
}

以上是关于js写的简单购物车2的主要内容，如果未能解决你的问题，请参考以下文章

python写的简单购物车

golang代码片段（摘抄）

记录-JS简单实现购物车图片局部放大预览效果

原生JavsScript实现简单购物车面向对象原生代码

一个简单的购物车程序

用js写的简单轮播特效