您现在的位置是：网站首页> 编程资料编程资料

原生JavaScript实现购物车效果_javascript技巧_

2023-05-24 254人已围观

简介原生JavaScript实现购物车效果_javascript技巧_

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

HTML：

                                                   图书类型：                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           序号 商品名 书籍名 分类 价格 购买数量 操作
1 活着 文学 25                                           1                                       
2 活着2 科幻 30                                           1                                       
3 活着3 小说 35                                           1                                       
4 活着4 悬疑 40                                           1                                       
         购物车为空！
           总金额：0￥

序号	书籍名	分类	价格	购买数量
1	活着	文学	25	1
2	活着2	科幻	30	1
3	活着3	小说	35	1
4	活着4	悬疑	40	1

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

效果：

全选: