基于JavaScript實(shí)現(xiàn)購(gòu)物車(chē)功能
更新時(shí)間：2017年02月07日 15:08:43 作者：醬果子
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)購(gòu)物車(chē)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)購(gòu)物車(chē)功能的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="shop">
<button id="btAdd">我的購(gòu)物車(chē)</button><br><br>
<table id="cart">
<thead>
<tr>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>小計(jì)</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">購(gòu)物車(chē)總金額：<span id="total">0.00</span></td>
</tr>
</tfoot>
</table>
</div>
<div id="footer"></div>
<script>
$('#read .page li a').click(function(){
var n=$(this).html();
$(this).parent().parent().next().children('p:nth-child('+n+')').slideDown(2000);
$(this).parent().parent().next().children('p:nth-child('+n+')').siblings().css('display','none');
})
$('#btAdd').click(function(){
var p = randPrice();
var c = randCount();
$('#cart tbody').append('<tr>'+
'<td>'+p+'</td>'+
'<td><input type="text" value="'+c+'"></td>'+
'<td>'+parseFloat((p*c).toFixed(2))+'</td>'+
'<td><a href="#" rel="external nofollow" >×</a></td>'+
'</tr>');
$('#total').html( getTotal() );
});
//為“刪除”按鈕(即X號(hào))綁定事件監(jiān)聽(tīng)函數(shù)，注意：X是后添加的，很多X執(zhí)行的行為是一樣的——使用事件代理
$('#cart tbody').delegate('td > a', 'click',function(event){
event.preventDefault();
var a = event.target;
$(a).parent().parent().remove();
});
//為“購(gòu)買(mǎi)數(shù)量”輸入框做事件綁定——使用事件代理
$('#cart tbody').delegate('td > input','change', function(event){
var input = event.target;
var count = input.value;
var price = $(input).parent().prev().html();
$(input).parent().next().html( price*count );
$('#total').html( getTotal() );
})
//計(jì)算購(gòu)物車(chē)的總金額
function getTotal(){
var sum = 0;
$('#cart tbody tr td:nth-child(3)').each(function(i, td){
sum += parseInt(td.innerHTML);
})
return sum;
}
function randPrice(){
var p = Math.random()*100;
p = p.toFixed(2);
p = parseFloat(p);
return p;
}
function randCount() {
var c = Math.floor(Math.random() * 10 + 1);
return c;
}
$('#header').load('php/header.php');
$('#footer').load('php/footer.php');
var theme=localStorage.getItem('ChoseTheme');
applyTheme(theme)
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js購(gòu)物車(chē)實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車(chē)程序
- 簡(jiǎn)單的前端js+ajax 購(gòu)物車(chē)框架(入門(mén)篇)
- js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)有圖有代碼
- 原生js模擬淘寶購(gòu)物車(chē)項(xiàng)目實(shí)戰(zhàn)
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車(chē)程序
- js+cookies實(shí)現(xiàn)懸浮購(gòu)物車(chē)的方法
- JavaScript編寫(xiě)一個(gè)簡(jiǎn)易購(gòu)物車(chē)功能
- 利用Angularjs和bootstrap實(shí)現(xiàn)購(gòu)物車(chē)功能
- 基于Vuejs實(shí)現(xiàn)購(gòu)物車(chē)功能
相關(guān)文章
JavaScript中return返回多個(gè)值的三個(gè)方法實(shí)現(xiàn)
本文主要介紹了JavaScript中return返回多個(gè)值的三個(gè)方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
BOM全稱(chēng)Browser Object Model瀏覽器對(duì)象模型，將瀏覽器的各個(gè)組成部分封裝成對(duì)象。DOM全稱(chēng)Document Object Model 文檔對(duì)象模型，將標(biāo)記語(yǔ)言文檔的各個(gè)組成部分，封裝為對(duì)象。本文將詳解BOM,DOM和事件的區(qū)別于用法，需要的可以參考一下2022-06-06
BootstrapValidator超詳細(xì)教程(推薦)
這篇文章主要介紹了BootstrapValidator超詳細(xì)教程(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了javascript計(jì)算漸變顏色的實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Ajax與服務(wù)器（JSON）通信實(shí)例代碼的相關(guān)資料,并附實(shí)例代碼，幫助大家學(xué)習(xí)理解此部分知識(shí)，需要的朋友可以參考下2016-11-11
使用uniapp打包微信小程序時(shí)主包和vendor.js過(guò)大解決(uniCloud的插件分包)
每個(gè)使用分包小程序必定含有一個(gè)主包,所謂的主包,即放置默認(rèn)啟動(dòng)頁(yè)面/TabBar頁(yè)面,以及一些所有分包都需用到公共資源/JS 腳本,下面這篇文章主要給大家介紹了關(guān)于使用uniapp打包微信小程序時(shí)主包和vendor.js過(guò)大解決的相關(guān)資料,,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了js判斷密碼強(qiáng)度的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
取消單選按鈕選中并判斷對(duì)象是否為空，在項(xiàng)目中也是比較常見(jiàn)的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-11-11
下面小編就為大家?guī)?lái)一篇js 兩個(gè)日期比較相差多少天的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
如何解決java.lang.NumberFormatException: null異常
這篇文章主要介紹了如何解決java.lang.NumberFormatException: null異常問(wèn)題，具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03