JS實(shí)現(xiàn)購物車基本功能
更新時(shí)間：2020年11月08日 10:45:20 作者：花落(→)凋謝
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)購物車基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
JS實(shí)現(xiàn)購物車商品 加、減、單選、全選、刪除、手動輸入、價(jià)格更新等功能，供大家參考，具體內(nèi)容如下
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();
}
}
//計(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"><h3>Dior 迪奧 花漾甜心小姐 女士淡香水</h3><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 h1{
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" > <h1>LOGO</h1> </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">高級搜索</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)動戶外</dt> <dd> <a href="#">運(yùn)動服飾</a> <em>|</em> <a href="#">運(yùn)動鞋</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"> <h1>購物車</h1> <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"> <h3>Dior 迪奧 花漾甜心小姐 女士淡香水</h3> <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"> <h3>LANCÔME 蘭蔻 嫩肌活膚精華肌底液</h3> <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"> <h3>購物指南</h3> <ul> <li> <a href="#" >購物流程</a> </li> <li> <a href="#" >發(fā)票制度</a> </li> <li> <a href="#" >賬戶管理</a> </li> <li> <a href="#" >會員優(yōu)惠</a> </li> </ul> </div> <div class="footer-link-column"> <h3>支付方式</h3> <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"> <h3>訂單服務(wù)</h3> <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"> <h3>配送方式</h3> <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"> <h3>售后服務(wù)</h3> <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 © 2016 XXX. All Rights Reserved.</p> </div> </div> </body> </html>
注：CSS樣式代碼由于太多上面沒有給全，只給了主要代碼。小伙伴們可以根據(jù)實(shí)際情況修改樣式。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
用js實(shí)現(xiàn)的自定義的對話框的實(shí)現(xiàn)代碼
javascript alert函數(shù)的替代方案，一個(gè)自定義的對話框的方法2010-03-03
這篇文章主要介紹了JavaScript缺少insertAfter解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
javascript關(guān)于open.window子頁面執(zhí)行完成后刷新父頁面的問題分析
這篇文章主要介紹了javascript關(guān)于open.window子頁面執(zhí)行完成后刷新父頁面的問題,實(shí)例分析了javascript操作子頁面的執(zhí)行與父頁面的刷新技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript中 創(chuàng)建動態(tài) QML 對象的方法
這篇文章主要介紹了 JavaScript中 創(chuàng)建動態(tài) QML 對象，下面文章主要分析了兩中方法，分別是從 QML 字符串創(chuàng)建對象和動態(tài)創(chuàng)建組件以及刪除對象等方法，具有有一定的參考價(jià)值，需要的小伙伴可以參考一下2021-12-12
layui 實(shí)現(xiàn)table翻頁滾動條位置保持不變的例子
今天小編就為大家分享一篇layui 實(shí)現(xiàn)table翻頁滾動條位置保持不變的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這里之所以使用setTimeout()，因?yàn)榭梢詮氐谆厥债?dāng)前所有對象，防止變量之間的引用導(dǎo)致釋放失敗，可以當(dāng)作一個(gè)保障措施，按照道理來說，這里不會執(zhí)行了。2010-04-04
JS實(shí)現(xiàn)仿PS的調(diào)色板效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)仿PS的調(diào)色板效果,結(jié)合完整實(shí)例形式分析了javascript通過運(yùn)算與動態(tài)操作頁面元素實(shí)現(xiàn)調(diào)色板功能的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
JavaScript其他類型的值轉(zhuǎn)換為布爾值的規(guī)則詳解
在JavaScript中,所有的值在邏輯上下文中都會被轉(zhuǎn)換為布爾類型（Boolean）,理解這些轉(zhuǎn)換規(guī)則對開發(fā)者來說至關(guān)重要,尤其是在條件判斷、短路運(yùn)算、邏輯非（!）等場景下,正確掌握布爾轉(zhuǎn)換可以避免潛在的bug,本文將詳細(xì)介紹 JavaScript 其他類型的值是如何轉(zhuǎn)換為布爾值的2025-04-04
一文詳解JSON.parse和JSON.stringify的用法
Json.stringify()和toString()兩者雖然都可以講目標(biāo)值轉(zhuǎn)為字符串,但是還是有本質(zhì)區(qū)別的,下面這篇文章主要給大家介紹了關(guān)于JSON.parse和JSON.stringify用法的相關(guān)資料,需要的朋友可以參考下2023-01-01
原生JS實(shí)現(xiàn)的跳一跳小游戲完整實(shí)例
這篇文章主要介紹了原生JS實(shí)現(xiàn)的跳一跳小游戲,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)跳一跳游戲的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2019-01-01