溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何利用JavaScript實(shí)現(xiàn)一個(gè)購物車功能

發(fā)布時(shí)間：2020-11-09 14:59:07 來源：億速云 閱讀：165 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何利用JavaScript實(shí)現(xiàn)一個(gè)購物車功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

JS實(shí)現(xiàn)購物車商品 加、減、單選、全選、刪除、手動(dòng)輸入、價(jià)格更新等功能，供大家參考，具體內(nèi)容如下

如何利用JavaScript實(shí)現(xiàn)一個(gè)購物車功能

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();
 }
 }
 
 //手動(dòng)輸入
 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();
 }
 }
 
 
 //計(jì)算
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++) {
 //獲取單價(jià)
 var priceEm = tbodyTr[i].getElementsByClassName("price-em")[0];
 var price = parseFloat(priceEm.innerText);

 //獲取數(shù)量
 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);
 }
})

CSS代碼

@charset "utf-8";

#main{
 padding: 30px 0px;
}

#cart{
 background: #FFFFFF;
 padding: 40px;
}

#cart h2{
 line-height: 40px;
 padding: 0px 0px 10px 0px;
}

table.form{
 border-collapse: collapse;
 empty-cells: show;
 margin: 20px 0px;
 padding: 0px;
 table-layout: fixed;
 width: 100%;
}

table.form th,
table.form td{
 border-bottom: 1px solid #DDDDDD;
 padding: 15px 10px;
 text-align: left;
}

table.form{
 border-top: 3px solid #DDDDDD;
}

.goods .goods-image img{
 border: 1px solid #DDDDDD;
 float: left;
 height: 100px;
 margin: 0px 20px 0px 0px;
}

.goods .goods-information{
 float: left;
}

.goods .goods-information ul{
 color: #666666;
 font-size: 12px;
 line-height: 20px;
 margin:10px 0px 0px 0px;
}

.price,
.amount,
#total-amount{
 color: #E00000;
}

#total-amount{
 font-size: 22px;
}

.price em,
.amount em,
#total-amount em{
 font-style: normal;
}

.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus{
 background: #FFFFFF;
 border: 1px solid #DDDDDD;
 color: #333333;
 float: left;
 font-weight: bold;
 margin: 0px;
 outline: none;
 text-align: center;
}

.combo .combo-minus,
.combo .combo-plus{
 font-size: 16px;
 height: 26px;
 line-height: 26px;
 padding: 0px;
 width: 24px;
}

.combo .combo-value{
 border-left: none;
 border-right: none;
 height: 20px;
 line-height: 20px;
 padding: 2px;
 width: 40px;
}

#cart-delete{
 margin-left: 20px;
}

#settlement{
 background: #E00000;
 border: none;
 color: #FFFFFF;
 float: right;
 font-size: 16px;
 height: 40px;
 line-height: 40px;
 margin: 0px;
 outline: none;
 padding: 0px;
 width: 160px;
}

HTML代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>商城</title>
 <link rel="stylesheet" href="./css/common.css" rel="external nofollow" >
 <link rel="stylesheet" href="./iconfont/iconfont.css" rel="external nofollow" >
 <link rel="stylesheet" href="./css/cart.css" rel="external nofollow" >
 <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
 <script type="text/javascript" src="./js/cart2.js"></script>
 </head>
 <body>
 <div id="topbar">
 <div class="container">
 <div id="topbar-location">
 <i class="iconfont icon-location"></i>
 <a href="#">北京</a>
 </div>
 <div id="topbar-menu">
 <ul>
 <li>
 <a href="#"class="red">登錄</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="./register.html" rel="external nofollow" >免費(fèi)注冊</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#">我的訂單</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#">收藏夾</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#">幫助中心</a>
 </li>
 </ul>
 </div>
 </div>
 </div>
 <div id="header">
 <div class="container">
 <div id="header-logo">
 <a href="./index.html" rel="external nofollow" >
 <h2>LOGO</h2>
 </a>
 </div>
 <div id="header-search">
 <div id="header-search-combobox">
 <form action="#" method="post">
 <input type="text" name="keywords" placeholder="搜索" id="header-search-combobox-text">
 <button type="submit" id="header-search-combobox-button">
 <i class="iconfont icon-search"></i>
 </button>
 </form>
 </div>
 <div class="clear">
 <ul id="header-search-hotkeywords">
 <li>
 <strong>熱搜：</strong>
 </li>
 <li>
 <a href="#">筆記本</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#">平板</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#">手機(jī)</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#">墨盒</a>
 </li>
 </ul>
 <a href="#"id="header-search-advancedsearch">高級(jí)搜索</a>
 </div>
 </div>
 <div id="header-cart">
 <i class="iconfont icon-cart"></i>
 <a href="#">購物車</a>
 <strong>0</strong>
 </div>
 </div>
 </div>
 <div id="navigation">
 <div class="container">
 <div id="navigation-category">
 <div id="navigation-category-heading">
 <div class="float-left">
 <i class="iconfont icon-menu"></i>
 <strong>全部商品分類</strong>
 </div>
 <div class="float-right">
 <i class="iconfont icon-dropdown"></i>
 </div>
 </div>
 <div id="navigation-category-content">
 <dl>
 <dt>美容彩妝</dt>
 <dd>
 <a href="#">護(hù)膚</a>
 <em>|</em>
 <a href="#">面膜</a>
 <em>|</em>
 <a href="#">防曬</a>
 <em>|</em>
 <a href="#">彩妝</a>
 <em>|</em>
 <a href="#">香水</a>
 </dd>
 </dl>
 <dl>
 <dt>服飾箱包</dt>
 <dd>
 <a href="#">大牌</a>
 <em>|</em>
 <a href="#">服飾</a>
 <em>|</em>
 <a href="#">箱包</a>
 <em>|</em>
 <a href="#">配飾</a>
 <em>|</em>
 <a href="#">鞋履</a>
 </dd>
 </dl>
 <dl>
 <dt>數(shù)碼家電</dt>
 <dd>
 <a href="#">手機(jī)</a>
 <em>|</em>
 <a href="#">生活</a>
 <em>|</em>
 <a href="#">廚房</a>
 <em>|</em>
 <a href="#">數(shù)碼</a>
 <em>|</em>
 <a href="#">辦公</a>
 </dd>
 </dl>
 <dl>
 <dt>家居個(gè)護(hù)</dt>
 <dd>
 <a href="#">洗護(hù)</a>
 <em>|</em>
 <a href="#">居家</a>
 <em>|</em>
 <a href="#">女性</a>
 <em>|</em>
 <a href="#">寵物</a>
 <em>|</em>
 <a href="#">家紡</a>
 </dd>
 </dl>
 <dl>
 <dt>運(yùn)動(dòng)戶外</dt>
 <dd>
 <a href="#">運(yùn)動(dòng)服飾</a>
 <em>|</em>
 <a href="#">運(yùn)動(dòng)鞋</a>
 <em>|</em>
 <a href="#">戶外服飾</a>
 <em>|</em>
 <a href="#">戶外鞋靴</a>
 <em>|</em>
 <a href="#">戶外裝備</a>
 </dd>
 </dl>
 <dl>
 <dt>環(huán)球美食</dt>
 <dd>
 <a href="#">飲品</a>
 <em>|</em>
 <a href="#">零食</a>
 <em>|</em>
 <a href="#">糧油</a>
 <em>|</em>
 <a href="#">糕點(diǎn)</a>
 </dd>
 </dl>
 </div>
 </div>
 <div id="navigation-menu">
 <ul>
 <li>
 <a href="#">促銷</a>
 </li>
 <li>
 <a href="#">秒殺</a>
 </li>
 <li>
 <a href="#">優(yōu)惠券</a>
 </li>
 </ul>
 </div>
 </div>
 </div>
 <div id="main">
 <div class="container">
 <div id="cart">
 <h2>購物車</h2>
 <form action="#" method="post">
 <table class="form">
 <thead>
 <tr>
 <th width="8%">選擇</th>
 <th width="50%">商品</th>
 <th width="13%">單價(jià)（元）</th>
 <th width="15%">數(shù)量</th>
 <th width="14%">金額（元）</th>
 </tr>
 </thead>
 <tbody id="cart-goods-list">
 <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>
 <tr>
 <td>
 <input type="checkbox" name="good-id" value="2">
 </td>
 <td class="goods">
 <div class="goods-image">
 <img src="./pic/goods/3.jpg">
 </div>
 <div class="goods-information">
 <h4>LANC&Ocirc;ME 蘭蔻 嫩肌活膚精華肌底液</h4>
 <ul>
 <li>50毫升</li>
 <li>不支持7天無理由退貨</li>
 </ul>
 </div>
 </td>
 <td>
 <span class="price">￥<em class="price-em">598.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">598.00</em></strong>
 </td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td colspan="2">
 <label>
 <input type="checkbox" name="all">
 <span>全選</span>
 </label>
 <a href="#"id="cart-delete">刪除</a>
 </td>
 <td colspan="3">
 <span>合計(jì)：</span>
 <strong id="total-amount">￥<em id="total-amount-em">0.00</em></strong>
 <input type="submit" value="立即結(jié)算" id="settlement">
 </td>
 </tr>
 </tfoot>

 </table>
 </form>
 </div>
 </div>
 </div>
 <div id="footer">
 <div id="footer-promise">
 <div class="container clear">
 <div class="footer-promise-column clear">
 <img src="./img/1.png">
 <dl>
 <dt>100%正品</dt>
 <dd>正品保障 假一賠十</dd>
 </dl>
 </div>
 <div class="footer-promise-column clear">
 <img src="./img/2.png">
 <dl>
 <dt>無憂退貨</dt>
 <dd>國內(nèi)退貨 售后無憂</dd>
 </dl>
 </div>
 <div class="footer-promise-column clear">
 <img src="./img/3.png">
 <dl>
 <dt>低價(jià)保障</dt>
 <dd>縮減環(huán)節(jié) 確保低價(jià)</dd>
 </dl>
 </div>
 <div class="footer-promise-column clear">
 <img src="./img/4.png">
 <dl>
 <dt>海外發(fā)貨</dt>
 <dd>海外直郵 閃電發(fā)貨</dd>
 </dl>
 </div>
 </div>
 </div>
 <div id="footer-link">
 <div class="container clear">
 <div class="footer-link-column">
 <h4>購物指南</h4>
 <ul>
 <li>
 <a href="#" >購物流程</a>
 </li>
 <li>
 <a href="#" >發(fā)票制度</a>
 </li>
 <li>
 <a href="#" >賬戶管理</a>
 </li>
 <li>
 <a href="#" >會(huì)員優(yōu)惠</a>
 </li>
 </ul>
 </div>
 <div class="footer-link-column">
 <h4>支付方式</h4>
 <ul>
 <li>
 <a href="#" >貨到付款</a>
 </li>
 <li>
 <a href="#" >網(wǎng)上支付</a>
 </li>
 <li>
 <a href="#" >禮 品 卡</a>
 </li>
 <li>
 <a href="#" >銀行轉(zhuǎn)賬</a>
 </li>
 </ul>
 </div>
 <div class="footer-link-column">
 <h4>訂單服務(wù)</h4>
 <ul>
 <li>
 <a href="#" >配送查詢</a>
 </li>
 <li>
 <a href="#" >狀態(tài)說明</a>
 </li>
 <li>
 <a href="#" >取消訂單</a>
 </li>
 <li>
 <a href="#" >修改訂單</a>
 </li>
 </ul>
 </div>
 <div class="footer-link-column">
 <h4>配送方式</h4>
 <ul>
 <li>
 <a href="#" >配送范圍</a>
 </li>
 <li>
 <a href="#" >免郵標(biāo)準(zhǔn)</a>
 </li>
 <li>
 <a href="#" >訂單自提</a>
 </li>
 <li>
 <a href="#" >驗(yàn)貨簽收</a>
 </li>
 </ul>
 </div>
 <div class="footer-link-column">
 <h4>售后服務(wù)</h4>
 <ul>
 <li>
 <a href="#" >售后政策</a>
 </li>
 <li>
 <a href="#" >價(jià)格保護(hù)</a>
 </li>
 <li>
 <a href="#" >退款說明</a>
 </li>
 <li>
 <a href="#" >退 換 貨</a>
 </li>
 </ul>
 </div>
 </div>
 </div>
 <div id="footer-menu">
 <ul>
 <li>
 <a href="#" >關(guān)于我們</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#" >服務(wù)條款</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#" >隱私保護(hù)</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#" >聯(lián)系我們</a>
 </li>
 <li class="separator">|</li>
 <li>
 <a href="#" >幫助中心</a>
 </li>
 </ul>
 </div>
 <div id="footer-copyright">
 <p>Copyright &copy; 2016 XXX. All Rights Reserved.</p>
 </div>
 </div>
 </body>

</html>

上述就是小編為大家分享的如何利用JavaScript實(shí)現(xiàn)一個(gè)購物車功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手