原生JavaScript实现购物车效果
更新时间：2022年07月12日 09:16:32 作者：疑似忘川落九天
这篇文章主要为大家详细介绍了原生JavaScript实现购物车效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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();
}效果：
全选:
分类：
删除：
添加数量
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行，本文给大家2015-12-12
这篇文章主要为大家介绍下如果在textarea文本域中显示HTML代码，其实多用于网页编辑的开发，大家可以参考下2007-03-03
本篇文章通过前台跨域请求处理以及后台跨域的数据处理方式介绍，详细分析了ajax跨域的问题，对此有需要的朋友学习下。2018-02-02
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到IOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台,下面这篇文章主要给大家介绍了关于uniapp高频面试题及答案的相关资料,需要的朋友可以参考下2023-02-02
javascript一个无懈可击的实例化XMLHttpRequest的方法
由于IE新旧版本以及与其他浏览器在ajax技术上的不同，往往需要对不同的浏览器做不同的处理，除了笨拙的浏览器嗅探技术，大约也就是对象检测技术可用了。2010-10-10
在TypeScript 编程中,类型兼容是最基础的一道检查机制,一旦代码中出现类型不兼容的表达式,编译就会失败,本文主要介绍了Typescript中类型兼容的实现,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了JavaScript作用域链,结合实例形式较为详细的分析了作用域链的原理、功能与相关操作注意事项,需要的朋友可以参考下2019-01-01
layui数据表格 table.render 报错的解决方法
今天小编就为大家分享一篇layui数据表格 table.render 报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JavaScript+CSS无限极分类效果完整实现方法,涉及JavaScript针对页面元素节点遍历与动态操作技巧,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了利用javascript获取xml节点的最大值。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最新评论