本文实例为大家分享了JavaScript实现购物车效果的具体代码，供大家参考，具体内容如下
HTML：
序号
商品名
书籍名
分类
价格
购买数量
操作
1
活着
文学
2
活着2
科幻
3
活着3
小说
4
活着4
悬疑
购物车为空！
总金额：￥
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();
}
效果：
全选:
分类：
删除：
添加数量
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
vuejs手把手教你写一个完整的购物车实例代码
js购物车实现思路及代码(个人感觉不错)
JavaScript编写一个简易购物车功能
Javascript实现购物车功能的详细代码
js实现简单的购物车有图有代码
Jsp+Servlet实现购物车功能
原生js模拟淘宝购物车项目实战
Javascript操纵Cookie实现购物车程序
简单的前端js+ajax 购物车框架(入门篇)
js实现购物车功能