如何利用JavaScript实现一个购物车功能-创新互联

这期内容当中小编将会给大家带来有关如何利用JavaScript实现一个购物车功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

目前创新互联已为近千家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器租用、企业网站设计、吉安网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

JS实现购物车商品 加、减、单选、全选、删除、手动输入、价格更新等功能，供大家参考，具体内容如下

JavaScript代码

$(function(){
 
 $("#footer").hover(function(){
 $("#footer").css({"border":"#e00"})
 },)
 
 var inputs=document.getElementsByName("good-id");
 var all=document.getElementsByName("all")[0];
 
 all.onclick=function(){
 for(var i=0;i<inputs.length;i++){
 inputs[i].checked=this.checked;
 }
 sumprice();
 }
 
 for(var i=0;i<inputs.length;i++){
 inputs[i].onclick=function(){
 var count=0;
 for(var j=0;j<inputs.length;j++){
 if(inputs[j].checked==true){
 count++
 }
 }
 if(count<inputs.length){
 all.checked=false;
 }else{
 all.checked=true;
 }
 sumprice();
 }
 }
 
 //减少
 var minus=document.getElementsByName("minus");
 for(var i=0;i<minus.length;i++){
 minus[i].onclick=function(){
 var counts=this.nextElementSibling;
 var count=parseInt(counts.value);
 if(count>1){
 counts.value=--count;
 }
 sumprice();
 }
 }
 //增加
 var plus=document.getElementsByName("plus");
 for(var i=0;i<plus.length;i++){
 plus[i].onclick=function(){
 var counts=this.previousElementSibling;
 var count=parseInt(counts.value);
 counts.value=++count;
 sumprice();
 }
 }
 
 //手动输入
 var counts=document.getElementsByName("count");
 for(var i=0;i<counts.length;i++){
 counts[i].onblur=function(){
 var count=parseInt(this.value);
 if(isNaN(count)||count<1){
 count=1;
 }
 this.value=count;
 sumprice();
 }
 }
 
 
 //计算
function sumprice() {
 var tbody = document.getElementById("cart-goods-list");
 var tbodyTr = tbody.getElementsByTagName("tr");
 var sumprice=0;
 for(var i = 0; i < tbodyTr.length; i++) {
 //获取单价
 var priceEm = tbodyTr[i].getElementsByClassName("price-em")[0];
 var price = parseFloat(priceEm.innerText);

 //获取数量
 var counts = tbodyTr[i].getElementsByClassName("combo-value")[0];
 var count = parseInt(counts.value);
 //乘积
 var chengji=price*count;
 //把乘积弄到金额里面
 var amountEm=tbodyTr[i].getElementsByClassName("amount-em")[0];
 amountEm.innerText=chengji.toFixed(2);
 
 //获取单选框
 var liD=tbodyTr[i].getElementsByTagName("input")[0];
 if(liD.checked){
 sumprice+=chengji;
 }
 }
 var zong=document.getElementById("total-amount-em");
 zong.innerText=sumprice.toFixed(2);
}
 
 //删除
 document.getElementById("cart-delete").onclick=function(){
 var tbody = document.getElementById("cart-goods-list");
 var del=[];
 for(var i=0;i<inputs.length;i++){
 if(inputs[i].checked){
 del.push(inputs[i].parentElement.parentElement);
 }
 }
 for(var i=0;i<del.length;i++){
 tbody.removeChild(del[i]);
 }
 all.checked=false;
 sumprice();
 }
 
 document.getElementById("total-amount").onmouseover=function(){
 document.getElementById("total-amount").style.cursor="pointer";
 }
 
 document.getElementById("total-amount").onclick=function(){
 var tbody = document.getElementById("cart-goods-list");
 var tr=document.createElement("tr");
 tr.innerHTML='<tr><td><input type="checkbox" name="good-id" value="1"></td><td class="goods"><div class="goods-image"><img src="./pic/goods/1.jpg"></div><div class="goods-information"><h4>Dior 迪奥 花漾甜心小姐 女士淡香水</h4><ul><li>50毫升</li><li>不支持7天无理由退货</li></ul></div></td><td><span class="price">￥<em class="price-em">498.00</em></span></td><td><div class="combo"><input type="button" name="minus" value="-" class="combo-minus"><input type="text" name="count" value="1" class="combo-value"><input type="button" name="plus" value="+" class="combo-plus"></div></td><td><strong class="amount">￥<em class="amount-em">498.00</em></strong></td></tr>';
 tbody.appendChild(tr);
 }
})

本文名称：如何利用JavaScript实现一个购物车功能-创新互联
当前路径：https://www.cdcxhl.com/article18/ddcodp.html

成都网站建设公司_创新互联，为您提供服务器托管、网站设计、企业网站制作、品牌网站建设、静态网站、小程序开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联