你需要了解的纯原生JS实现带有功能的前端购物车

先来介绍一下都有哪些功能叭

添加购物车，清单库存数量会对应减少，库存不足会警告
从购物车删除，库存将返回清单，总价相应变化
点击"-"，数量会返回到清单库存
点击"+"，清单中库存会减少，库存不足会警告
勾选或取消勾选商品总价会相应变化
总价默认计算被选中的商品，添加商品到购物车时默认被选中
可以进行全选和反选，并一键删除，库存返回清单，总价改变

好嘞，由于代码的注释已经非常的详细了，在此不再做过多的解释了，没用任何框架了，看着注释代码很易懂！

先上HTML5的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>购物车案例</title><style>*{padding: 0;margin: 0;}.left{width: 55%;margin: 25px;float: left;}.right{float: left;margin-top: 60px;}ul li{color: red;font-weight: bold;}h1{text-align: center;color: red;}table{border: 2px solid #aaa;width: 100%;border-collapse: collapse;}th,td{border: 2px solid #bbb;padding: 6px;}tr td:last-child{text-align: center;}tr td:nth-child(1) img{vertical-align: middle;}.num{text-align: center;}#allchoose{margin-left: 10px;}#car{width: 100%;border-collapse: collapse;}#car table{border: 2px solid #aaa;width: 100%;border-collapse: collapse;}</style>
</head>
<body>
<div class="left"><h1>购书清单</h1><table><thead><tr><th>书名</th><th>单价</th><th>作者</th><th>出版社</th><th>库存</th><th>操作</th></tr></thead><tbody id="items"><tr><td><img src="book-images/dl.jpg">深度学习</td><td>100</td><td>赵老师</td><td>科学出版社</td><td>129</td><td><input type="button" value="加入购物车" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/ml.jpg">机器学习</td><td>120</td><td>周老师</td><td>清华大学出版社</td><td>6</td><td><input type="button" value="加入购物车" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/cv.jpg">计算机视觉</td><td>130</td><td>李老师</td><td>国防工业出版社</td><td>666</td><td><input type="button" value="加入购物车" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/dip.jpg">数字图像处理</td><td>140</td><td>彭老师</td><td>人民邮电出版社</td><td>450</td><td><input type="button" value="加入购物车" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/webgl.jpg">webGL编程指南</td><td>150</td><td>吴老师</td><td>清华大学出版社</td><td>99</td><td><input type="button" value="加入购物车" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/unity.jpg">Unity3D游戏开发</td><td>200</td><td>骆老师</td><td>浙江大学出版社</td><td>300</td><td><input type="button" value="加入购物车" onclick="add_book(this)"></td></tr></tbody></table><h1>购物车</h1><div id="car"><div id="allchoose"><input type="button" id="allSelected" value="全选"><input type="button" id="_Selected" value="反选"><input type="button" id="delete" value="删除商品"></div><br><table><thead><tr><th>书名</th><th>单价</th><th>数量</th><th>金额</th><th>删除</th></tr></thead><tbody id="goods"></tbody><tfoot><tr><td colspan="3" align='center'>总计</td><td id="total" colspan="2">0</td></tr></tfoot></table></div>
</div>
<div class="right"><ul><li>功能介绍：</li><li>添加购物车，清单库存数量会对应减少，库存不足会警告</li><li>从购物车删除，库存将返回清单，总价相应变化</li><li>点击"-"，数量会返回到清单库存</li><li>点击"+"，清单中库存会减少，库存不足会警告</li><li>勾选或取消勾选商品总价会相应变化</li><li>总价默认计算被选中的商品，添加商品到购物车时默认被选中</li><li>可以进行全选和反选，并一键删除，库存返回清单，总价改变</li></ul>
</div><script src="goods.js"></script>
</body></html>

然后是JS的代码，代码文件名为“goods.js”

//控制全选
var targets=document.getElementsByName('choose')
document.getElementById('allSelected').onclick=function(){   //全选for (var i=0;i<targets.length;i++){targets[i].checked=true;}total()   //更新总价格
}
document.getElementById('_Selected').onclick=function(){    // 反选for (var i=0;i<targets.length;i++){targets[i].checked=!targets[i].checked;//取反操作}total()    //更新总价格
}document.getElementById('delete').onclick=function(){       //删除var sign=targets.length    //targets的起始长度var _length=0for(var i=0;i<targets.length;i++){if(targets[i].checked===true){_length++   //被选中的targets的长度}}var leftL=sign-_length    //除去被选中后剩余的targets长度console.log(_length)console.log(leftL)while(targets.length>leftL){    //删除一行，targets长度会减少1，而i++导致每次执行删除操作只能删除一半，故再套一层循环// console.log("targets: "+targets.length)for(var i=0;i<targets.length;i++){//执行循环后，targets长度会减半if(targets[i].checked===true){del(targets[i])    //调用删除函数}}}
}//将商品添加购物车
function add_book(btn){var tr=btn.parentNode.parentNodevar tds=tr.getElementsByTagName('td')var inner_name=tds[0].innerHTML   //带上HTML标签var name=tds[0].innerText    //书的名字，不带HTML标签// console.log(inner_name)// console.log(name)var price=tds[1].innerHTML  //书的价格var leftAm=parseInt(tds[4].innerHTML)if (leftAm===0){alert('库存不足!')return //如果库存不足函数运行到这里会退出}//如果库存充足继续向下执行else{tds[4].innerHTML=leftAm-1}var tbody=document.getElementById('goods')var trs=tbody.getElementsByTagName('tr')// var row=tbody.insertRow(-1)//不能在此定义row，因为它会默认添加一个新的空行，会导致str的起始length是1而不是0，而且innerText获取不到任何东西就会报错，找了很久的bug原来是它！！！// console.log(trs.length)var flag=0 //定义flag来判断在购物车中是否已经存在相同书籍for(var i=0;i<trs.length;i++){var tds=trs[i].getElementsByTagName('td')var book_name=tds[0].innerText    //获取书的名字if(book_name===name){//在购物车中找到了相同的书flag=1// var input=trs[i].getElementById('num')    如果把num设置成id，获取不到内容，故改成classvar input=trs[i].getElementsByClassName('num')[0]// console.log(input)var value=parseInt(input.value)// console.log(value)input.value=value+1money=parseFloat(tds[3].innerHTML)tds[3].innerHTML=price*(value+1)    //更新该书的总价格}}if(flag===0){var row=tbody.insertRow(-1)//-1表在当前行后插入行row.innerHTML="<td>"+"<input type='checkbox' name='choose' checked='true' onclick='total()'/>"+inner_name+"</td>"+"<td>"+price+"</td>"+"<td>"+"<input type=button value='-' onclick=change(this,-1) style='width: 20px'/>"+"<input type=text class=num value='1' size=1 readonly'/>"+"<input type=button value='+' onclick=change(this,+1) style='width: 20px'/>"+"</td>"+"<td>"+price+"</td>"+"<td>"+"<input type=button value='删除' onclick='del(this)'/>"+"</td>"}total()
}//增加或者减少n本书
function change(btn,n){var inputs=btn.parentNode.getElementsByTagName('input')var amount=parseInt(inputs[1].value)var tds=btn.parentNode.parentNode.getElementsByTagName('td')// var money=parseFloat(tds[3].innerHTML)    //总价var price=parseFloat(tds[1].innerHTML)    //单价if(amount<=0 && n<0){ //数量为0时不能再减少数量return}var name=tds[0].innerTextvar item_trs=document.getElementById('items').getElementsByTagName('tr')for (var i=0;i<item_trs.length;i++){var item_tds=item_trs[i].getElementsByTagName('td')// console.log(item_tds[0].innerText)if(item_tds[0].innerText===name){var item_amount=parseInt(item_tds[4].innerHTML)// console.log(item_amount)if(n>0 && item_amount<=0){alert("库存不足！")return}item_tds[4].innerHTML=item_amount-n}}inputs[1].value=amount+ntds[3].innerHTML=price*(amount+n)total()
}//点击每行的删除
function del(btn){var tr=btn.parentNode.parentNodevar tds=tr.getElementsByTagName('td')var inputs=tds[2].getElementsByTagName('input')var amount=parseInt(inputs[1].value)    //获取书的数量var name=tds[0].innerTextvar trs=document.getElementById('items').getElementsByTagName('tr')for (var i=0;i<trs.length;i++){var tds=trs[i].getElementsByTagName('td')var item_name=tds[0].innerText    //清单中该书的数名字if(name===item_name){var item_amount=parseInt(tds[4].innerHTML)    //清单中该书的数量tds[4].innerHTML=item_amount+amount}}tr.remove()//移除该行total()}//计算总金额
function total(){var tbody=document.getElementById('goods')var trs=tbody.getElementsByTagName('tr')var sum=0   //总价for (var i=0;i<trs.length;i++){var tds=trs[i].getElementsByTagName('td')var input=tds[0].children[0]    //获取到input标签// console.log(tds[0].innerHTML)// console.log(input)var money=parseFloat(tds[3].innerHTML)if(input.checked===true){    //只有当商品被勾选时才会被计入总价sum+=money}}var total=document.getElementById('total')total.innerHTML=sum
}

最后的效果就是这样的啦^_^

你需要了解的纯原生JS实现带有功能的前端购物车相关推荐

react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
扫雷html5简单初级,纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍纯原生js 实现且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍纯原生js 实现且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
html手机页面选项卡,移动端网页纯原生js选项卡tab切换
适合移动网页纯原生js选项卡tab切换 *{ margin: 0; padding: 0} ul,li{ list-style: none} .tabClick{ background: #f3f3f ...
原生js循环展示dom_【前端面试】用一道题讲 js 的事件循环队列
昨天去面了滴滴,一口气面了三面,考了 promise 和事件循环.之前的猿辅导也考察了这些,几乎所有的大厂中厂都一定会考原生 js 的事件循环队列. 今天,我把昨天考察的原题拿出来分析一下. setT ...
js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...
原生JS实现放大镜功能
原生JS实现的放大镜功能,自己写的,简单使用点击下面连接去我的github上下载出来打开就行,不需要复杂配置,在img标签的src属性把你自己的图片换上去就ok. 文件在此走过路过,喜欢的话点个赞 ...
纯原生JS实现导出Excel文件
前言: 各种js库用起来冗余,并且只想简单的导出excel文件选择table标签是为了后期能定制化内容 0.效果预览 excel文件: 浏览器控制台触发下载: 1.定义工具函数: // xlsxE ...

你需要了解的纯原生JS实现带有功能的前端购物车

你需要了解的纯原生JS实现带有功能的前端购物车相关推荐

最新文章

热门文章