原生JavaScript实现购物车效果

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

HTML：

    
        
        
        
    
    
        图书类型：
            全部
            科幻
            小说
            文学
            悬疑
        
        
            
                
                
                
                
                
                
                
                
            
            
                
                
                
                
                
                
                
                
            
            
                
                
                
                
                
                
                
                    
            
            
                
                
                
                
                
                
                
                    
            
            
                
                
                
                
                
                
                
                    
            
 
        
全选
序号
商品名
书籍名
分类
价格
购买数量
操作
1
活着
文学
25

                    +
                    1
                    -
                
移除
2
活着2
科幻
30

                    +
                    1
                    -
                
移除
3
活着3
小说
35

                    +
                    1
                    -
                
移除
4
活着4
悬疑
40

                    +
                    1
                    -
                
移除
        
购物车为空！
 
        总金额：0￥
 
        
 
    
    
    
    

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();
 
 
}

效果：

全选:

分类：

删除：

添加数量

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。