原生JavaScript实现购物车效果

Phylicia ·

更新时间:2024-09-20

· 1742 次阅读

本文实例为大家分享了JavaScript实现购物车效果的具体代码，供大家参考，具体内容如下

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            table {
                border: 1px solid #e9e9e9;
                border-collapse: collapse;
                border-spacing: 0;
            }
            td {
                padding: 8px 16px;
                border: 1px solid #e9e9e9;
                text-align: left;
            }
            td img {
                width: 50px;
                height: 50px;
            }
            th {
                background-color: #f7f7f7;
                color: #5c6b77;
                font-weight: 600;
            }
        </style>
    </head>
    <body>
        图书类型：<select id="xlxx" onchange="tslx()">
            <option value="全部">全部</option>
            <option value="科幻">科幻</option>
            <option value="小说">小说</option>
            <option value="文学">文学</option>
            <option value="悬疑">悬疑</option>
        </select>
        <table border="0">
            <tr>
                <th><button type="button" style="border: 0;background-color: #f7f7f7;" id="qbxz"
                        onclick="quanxuan ()">全选</button></th>
                <th>序号</th>
                <th>商品名</th>
                <th>书籍名</th>
                <th>分类</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr name="wx">
                <td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
                <td>1</td>
                <td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20180520083915_sMx82.jpeg"></td>
                <td>活着</td>
                <td>文学</td>
                <td><label name="jg">25</label></td>
                <td>
                    <button onclick="jia('num1')">+</button>
                    <label id="num1" name="num">1</label>
                    <button onclick="jian('num1')">-</button>
                </td>
                <td><button onclick="deletet(1)">移除</button></td>
            </tr>
            <tr name="kh">
                <td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
                <td>2</td>
                <td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20180520083916_8ntMr.jpeg"></td>
                <td>活着2</td>
                <td>科幻</td>
                <td><label name="jg">30</label></td>
                <td>
                    <button onclick="jia('num2')">+</button>
                    <label id="num2" name="num">1</label>
                    <button onclick="jian('num2')">-</button>
                </td>
                    <td><button onclick="deletet(2)">移除</button></td>
            </tr>
            <tr name="xs">
                <td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
                <td>3</td>
                <td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20191227173047_zrXxQ.jpeg"></td>
                <td>活着3</td>
                <td>小说</td>
                <td><label name="jg">35</label></td>
                <td>
                    <button onclick="jia('num3')">+</button>
                    <label id="num3" name="num">1</label>
                    <button onclick="jian('num3')">-</button>
                </td>
                    <td><button onclick="deletet(3)">移除</button></td>
            </tr>
            <tr name="xy">
                <td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
                <td>4</td>
                <td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20191227173048_eGeBA.jpeg"></td>
                <td>活着4</td>
                <td>悬疑</td>
                <td><label name="jg">40</label></td>
                <td>
                    <button onclick="jia('num4')">+</button>
                    <label id="num4" name="num">1</label>
                    <button onclick="jian('num4')">-</button>
                </td>
                    <td><button onclick="deletet(4)">移除</button></td>
            </tr>
        </table>
        <h1 id="nr" style="display: none;">购物车为空！</h1>
        总金额：<label id="zh" style="color: red;">0</label>￥
        <img src="" style="width: 150px;" id="img">
    </body>
    <script type="text/javascript">
    </script>
    <script src="../js/gwc.js" type="text/javascript" charset="utf-8"></script>
</html>

JavaScript：

/*
1.图片悬浮时的放大
2.全选
3.分类
4.数值的加减
5.总和的实现
6.删除功能
*/
// 1.图片悬浮时的放大
// 图片移入放大
function tpmax(lj) {
    //移入 将获取到的图片路径加载到下方显示图片路径实现移入显示
    document.getElementById("img").src = lj
}
// 图片移出隐藏
function tpmin() {
    //移出 将空的图片路径加载到下方显示图片路径实现移出不显示
    document.getElementById("img").src = "";
}
// 2.全选
function quanxuan() {
    var qxaj = document.getElementsByClassName("qx");
    // 遍历判断复选框的状态
    for (var i = 0; i < qxaj.length; i++) {
        if (qxaj[i].checked == true) {
            for (var i = 0; i < qxaj.length; i++) {
                qxaj[i].checked = false;
            }
        } else {
            for (var i = 0; i < qxaj.length; i++) {
                qxaj[i].checked = true;
            }
        }
    }
    zhjs();
}
// 3.分类
/*
1.只显示分类的:将不属于的分类隐藏，直显示匹配的行
2.显示与隐藏两个方法
*/
function tslx() {
    var xlxx = document.getElementById("xlxx").value;
    var kh = document.getElementsByName("kh");
    var xs = document.getElementsByName("xs");
    var wx = document.getElementsByName("wx");
    var xy = document.getElementsByName("xy");
    if (xlxx == "全部") {
        xianshi(kh);
        xianshi(xs);
        xianshi(wx);
        xianshi(xy);
    }
    if (xlxx == "科幻") {
        xianshi(kh);
        yincang(xs);
        yincang(wx);
        yincang(xy);
    }
    if (xlxx == "文学") {
        yincang(kh);
        yincang(xs);
        xianshi(wx);
        yincang(xy);
    }
    if (xlxx == "小说") {
        yincang(kh);
        xianshi(xs);
        yincang(wx);
        yincang(xy);
    }
    if (xlxx == "悬疑") {
        yincang(kh);
        yincang(xs);
        yincang(wx);
        xianshi(xy);
    }
}
// 显示
function xianshi(xlxx) {
    // 遍历寻找匹配的值
    for (var i = 0; i < xlxx.length; i++) {
        xlxx[i].style.visibility = "visible";
    }
}
// 隐藏
function yincang(xlxx) {
    for (var i = 0; i < xlxx.length; i++) {
        xlxx[i].style.visibility = "collapse";
    }
}
// 4.数值的加减
function jian(numid) {
    var num = document.getElementById(numid).innerHTML;
    var ljnum = parseInt(num) - 1;
    if (ljnum > 0) {
        document.getElementById(numid).innerHTML = ljnum;
    }
    zhjs();
}
function jia(numid) {
    // 得到原始值
    var num = document.getElementById(numid).innerHTML;
    // 得到累加值
    var ljnum = parseInt(num) + 1;
    // 赋值
    document.getElementById(numid).innerHTML = ljnum;
    zhjs();
}
//5.总和计算
function zhjs() {
    var jg = document.getElementsByName("jg");
    var sl = document.getElementsByName("num");
    var cb = document.getElementsByName("cb");
    var sum = 0;
    for (var i = 0; i < cb.length; i++) {
        if (cb[i].checked == true) {
            sum += parseInt(jg[i].innerHTML) * parseInt(sl[i].innerHTML);
        }
    }
    document.getElementById("zh").innerHTML = sum;
}
// 6.删除
// 遍历全部tr
var s = 0;
var qbtr = document.getElementsByTagName("tr");
for (var i = 0; i < qbtr.length; i++) {
    s++;
}
function deletet(index) {
    // tr()
    var c = document.getElementsByName("cb");
    c[index - 1].checked = false;
    var h = document.getElementsByTagName("tr");
    h[index].style.display = "none";
    s--;
    if (s == 1) {
        document.getElementById("nr").style.display = "block";
        document.getElementById("cartb").style.display = "none";
        document.getElementById("stype").style.display = "none";
    }
    zhjs();
}

效果：

全选: