這期內容當中小編將會給大家帶來有關如何利用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實現一個購物車功能-創新互聯
當前路徑：http://www.yijiale78.com/article18/ddcodp.html

成都網站建設公司_創新互聯，為您提供服務器托管、網站設計、企業網站制作、品牌網站建設、靜態網站、小程序開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯