JavaScript-实现简易购物车
Published in：2020-08-16 |

实现简易购物车,删除,全选,合计

JavaScript实现简易购物车

实现的效果图

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>


    <link rel="stylesheet" href="my_css.css">
</head>
<body>
<div id="box">
    <table id="t">
        <thead>
        <tr>
            <th width="100px"><label>
                <input type="checkbox" class="check-box" onclick="check_all(this)"> 全选</label></th>
            <th>商品</th>
            <th width="100px">单价</th>
            <th>数量</th>
            <th width="100px">小计</th>
            <th width="100px">操作</th>
        </tr>
        </thead>

        <tr>
            <td><input class="checkbox" type="checkbox" onclick="check(this)"></td>
            <td class="goods"><img src="1.jpg" alt="图片加载失败"><span>Casio/卡西欧 EX-TR350</span></td>
            <td class="price">5999.88</td>
            <td class="count">
                <input type="button" class="reduce" value="-" onclick="reduce(this)">
                <input class="count-input" type="text" value="1" size="1px">
                <input type="button" class="add" value="+" onclick="add(this)">
            </td>
            <td class="subtotal">5999.88</td>
            <td class="operation"><a class="delete" href="javascript:void(0)" onclick="delete1(this)">删除</a></td>
        </tr>
        <tr>
            <td><input class="checkbox" type="checkbox" onclick="check(this)"></td>
            <td class="goods"><img src="2.jpg" alt="图片加载失败"><span>Canon/佳能 PowerShot SX50 HS</span></td>
            <td class="price">3888.50</td>
            <td class="count">
                <input type="button" class="reduce" value="-" onclick="reduce(this)">
                <input class="count-input" type="text" value="1" size="1px">
                <input type="button" class="add" value="+" onclick="add(this)">
            </td>
            <td class="subtotal">3888.50</td>
            <td class="operation"><a class="delete" href="javascript:void(0)" onclick="delete1(this)">删除</a></td>
        </tr>
        <tr>
            <td><input class="checkbox" type="checkbox" onclick="check(this)"></td>
            <td class="goods"><img src="3.jpg" alt="图片加载失败"><span>Sony/索尼 DSC-WX300</span></td>
            <td class="price">1428.50</td>
            <td class="count">
                <input type="button" class="reduce" value="-" onclick="reduce(this)">
                <input class="count-input" type="text" value="1" size="1px">
                <input type="button" class="add" value="+" onclick="add(this)">
            </td>
            <td class="subtotal">1428.50</td>
            <td class="operation"><a class="delete" href="javascript:void(0)" onclick="delete1(this)">删除</a></td>
        </tr>
        <tr>
            <td><input class="checkbox" type="checkbox" onclick="check(this)"></td>
            <td class="goods"><img src="4.jpg" alt="图片加载失败"><span>Fujifilm/富士 instax mini 25</span></td>
            <td class="price">640.60</td>
            <td class="count">
                <input type="button" class="reduce" value="-" onclick="reduce(this)">
                <input class="count-input" type="text" value="1" size="1px">
                <input type="button" class="add" value="+" onclick="add(this)">
            </td>
            <td class="subtotal">640.60</td>
            <td class="operation"><a class="delete" href="javascript:void(0)" onclick="delete1(this)">删除</a></td>
        </tr>
        <tr>
            <td colspan="5">
                <div id="foot">
                    <label><input type="checkbox" class="check-box" onclick="check_all(this)"> 全选</label>
                    <a id="deleteAll" href="javascript:void(0)" onclick="delete_all()">删除</a>
                </div>
                <div id="selected">已选商品<span id="selectedTotal">0</span>件<span id="hidden">︽</span></div>
                <div>合计：￥<span id="priceTotal">0</span></div>
            </td>
            <td>

                <div onclick="getTotal();">结 算</div>

            </td>
        </tr>
    </table>
</div>

<script src="my_js.js"></script>
</body>
</html>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
table {
    margin: 0 auto;
    border: 1px #CADEFF solid;
    text-align: center;
    border-spacing: 0;
}
a {
    color: #666;
    text-decoration: none;
}
th {
    background: #e2f2ff;
}
td {
    text-align: center;
    padding: 10px;
    color: #444;
}
#box table th, #box table td {
    border: 1px solid #CADEFF;
    border-spacing: 0;
}
.goods span {
    width: 180px;
    margin-top: 30px;
    text-align: left;
    float: left;
}
img {
    width: 100px;
    height: 80px;
    margin-right: 10px;
    float: left;
}

#foot {
    float: left;
    margin-right: 300px;
}
#selected {
    float: left;
}
.count .add, .count .reduce {
    height: 25px;
    width: 17px;
    background: #f0f0f0;
    text-align: center;
    line-height: 25px;
    color: #444;
}
.count input {
    height: 25px;
    line-height: 25px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
    background-color: #fff;
}
.price {
    width: 130px;
}
.count {
    width: 90px;
}

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
//数量点击减少事件
function reduce(th) {
    var reduce1 = Number(th.nextElementSibling.value);     //获取数量
    var element = th.nextElementSibling;    //获取减少框的兄弟标签数量框
    var reduce2 = reduce1 - 1;              //点击事件时,数量减一
    element.value = reduce2;                //赋值操作
    if (reduce2 === 0) {                    //数量不能为0
        th.disabled = true                  //禁用属性,停止使用
    }
    var price = th.parentNode.previousElementSibling.textContent ;//获取单价
    var subtotal = th.parentNode.nextElementSibling; // 获取小计
    var subtotal1 = Number(price) * Number(element.value);  //计算小计 ,转换为number属性,原属性为string
    subtotal.textContent = subtotal1.toFixed(2);  //toFixed保留小数
    getP()                      //调用合计方法
}
//添加商品
function add(th) {
    th.previousElementSibling.previousElementSibling.disabled = false;  //重置disabled属性
    var add1 = Number(th.previousElementSibling.value);
    var element = th.previousElementSibling;
    var add2 = add1 + 1;
    element.value = add2;
    var price = th.parentNode.previousElementSibling.textContent;
    var subtatal = th.parentNode.nextElementSibling;
    var subtatal1 = Number(price) * Number(element.value);
    subtatal.textContent = subtatal1.toFixed(2);
    getP()
}
//删除商品
function delete1(th) {
    th.parentNode.parentNode.remove();
    getP()
}
//点击事件
function check(th) {
    getP();
}
var checked = document.getElementsByClassName("checkbox");//获取所有的checkbox类的列表
//选择商品删除
function delete_all(th) {
    for (var i = checked.length - 1; i >= 0; i--) {     //长度 1开始,下标0开始 反向遍历, 正向删除,下标会变化
        if (checked[i].checked) {
            checked[i].parentNode.parentNode.remove();
        }
    }
    getP()
}
//全选或不选
function check_all(th) {
    // console.log(checked);
    var check1 = th.checked;
    var check2 = document.getElementsByClassName("check-box");
    for (var i = 0; i < checked.length; i++) {
        checked[i].checked = th.checked;
    }
    check2[0].checked = check1;
    check2[1].checked = check1;
    getP()
}
//合计和已选商品
function getP() {
    var selected = document.getElementById("selectedTotal");  //已选择的物品件数
    var priceTotal = document.getElementById("priceTotal");   //已选择的物品总价格
    var subtotal = document.getElementsByClassName("subtotal");  //获取小计的数组
    var count = document.getElementsByClassName("count-input"); //获取所有的物品数量数组
    var selected1 = 0;
    var priceTotal1 = 0;
    for (var j = 0; j < checked.length; j++) {
        if (checked[j].checked) {
            selected1 += Number(count[j].value);
            priceTotal1 += Number(subtotal[j].textContent);
        }
    }
    selected.textContent = selected1;
    priceTotal.textContent = priceTotal1.toFixed(2);

}

JavaScript
Prev:
jQuery-实现简易购物车
Next:
Python面试题

    • Copyright © 2022 - 2024 16778738 | Powered by “> |