原生js模擬淘寶購物車項目實戰(zhàn)
更新時間：2021年04月27日 09:53:50 作者：小平果118
這篇文章主要向大家推薦了一個原生js模擬淘寶購物車項目實戰(zhàn)，包括商品的單選、全選、刪除、修改數(shù)量、價格計算、數(shù)目計算、預(yù)覽等功能的實現(xiàn)，感興趣的小伙伴們可以參考一下
本文實例講述了原生js模擬淘寶購物車實現(xiàn)代碼。分享給大家供大家參考。具體如下：
通過JavaScript實現(xiàn)類似與淘寶的購物車效果，包括商品的單選、全選、刪除、修改數(shù)量、價格計算、數(shù)目計算、預(yù)覽等功能的實現(xiàn)。實現(xiàn)的效果圖：
相應(yīng)的代碼：
shoppingCart.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>JavaScript實現(xiàn)購物車項目實戰(zhàn)</title>
<link rel="stylesheet" type="text/css" href="./css/shoppingCart.css">
<script type="text/javascript" src="./js/shoppingCart.js"></script>
</head>
<body>
<table id="cartTable">
<thead>
<tr class="order_content">
<th><input class="check_all check" type="checkbox"></input> 全選</th>
<th>商品</th>
<th>單價</th>
<th>數(shù)量</th>
<th>小計</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="order_content">
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="./imgs/apple6s.png"><span>Iphone 6S</span></td>
<td class="price">5099.88</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">5099.88</td>
<td class="operation"><span class="delete">刪除<span></td>
</tr>
<tr class="order_content">
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="./imgs/macbook.png"><span>MacBook Air</span></td>
<td class="price">1099.99</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">1099.99</td>
<td class="operation"><span class="delete">刪除<span></td>
</tr>
<tr class="order_content">
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="./imgs/ipadmini.png"><span>Ipad mini2 銀16g WLAN7.9英寸</span></td>
<td class="price">6599.00</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">6599.00</td>
<td class="operation"><span class="delete">刪除<span></td>
</tr>
<tr>
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="./imgs/applewatch.png"><span>IWatch EXTS Min</span></td>
<td class="price">9998.68</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">9998.68</td>
<td class="operation"><span class="delete">刪除<span></td>
</tr>
</tbody>
</table>
<div class="slected view">
<div id="selectedViewList" class="clearfix">
<!-- <div><img src="./imgs/applewatch.png"><span>取消選擇</span></div> -->
</div>
<span class="arrow">.<span>.</span></span>
</div>
<div id = "footer" class="footer">
<label class="fl select_all" ><input class="check_all check" type="checkbox"> 全選</input></label>
<a class="fl delete_all" id="deleteAll" href="javascript:;">刪除</a>
<div class="fr closing">結(jié)算</div>
<div class="fr selected_totle">合計：￥ <span id="priceTotle">0.00</span> </div>
<div class="fr selectAll" id="selected">已購商品
<span id = "selectTotle">0</span>件
<span class="arow up">+++</span>
<span class="arow down">---</span>
</div>
</div>
</body>
</html>
shoppingCart.js
window.onload = function(){
//低版本的IE瀏覽器不支持getElementByClassName方法，考慮兼容性,重寫方法。
if (!document.getElementByClassName) {
document.getElementByClassName =function(cls){
var ret = [];
var clsElments = document.getElementsByTagName('*');
for (var i = 0, len = clsElments.length; i < len; i++) {
//考慮一個標(biāo)簽有多個class的情況,這里用正則表達(dá)式會好一點
if (clsElments[i].className == cls
|| (clsElments[i].className.indexOf(cls + " ") >= 0)
|| (clsElments[i].className.indexOf(" " + cls + " ") >= 0)
|| (clsElments[i].className.indexOf(" " + cls) >= 0))
{
ret.push(clsElments[i]);
}
}
return ret;
}
}
var cartTable = document.getElementById("cartTable");
var tr = cartTable.children[1].rows; //table標(biāo)簽特有的屬性，rows可以獲得表格元素的所有tr行。
var checkInput = document.getElementByClassName('check');//獲得所有的單選框
var checkAllInput = document.getElementByClassName('check_all');//獲得所有的單選框
var priceTotle = document.getElementById("priceTotle");//總價
var selectTotle = document.getElementById("selectTotle");//已選商品
var selected = document.getElementById("selected");
var footer = document.getElementById("footer");//底部標(biāo)簽
var selectedViewList = document.getElementById("selectedViewList");//底部標(biāo)簽
var deleteAll = document.getElementById("deleteAll");
//計算總價格和數(shù)量
function getTotle(){
var selectNum = 0;//數(shù)量
var priceNum = 0;//價格
var HTMLstr = ""; //縮略圖的字符串拼接
for (var i = 0,len = tr.length; i < len; i++) {
if (tr[i].getElementsByTagName("input")[0].checked) {
tr[i].className ="on";
selectNum += parseInt(tr[i].getElementsByTagName("input")[1].value);
priceNum += parseFloat(tr[i].cells[4].innerHTML);
//拼接字符串顯示已經(jīng)選擇的商品
HTMLstr += '<div><img src="'+ tr[i].getElementsByTagName('img')[0].src +'"><span class ="del" index ="'+ i +'">取消選擇</span></div>';
}
else{
tr[i].className = "";
}
}
selectTotle.innerHTML = selectNum;
priceTotle.innerHTML = priceNum.toFixed(2);//保留兩位小數(shù)
selectedViewList.innerHTML = HTMLstr;
}
//計算小計價格
function getSubTotle(tr){
var tds = tr.cells;
var price = parseFloat(tds[2].innerHTML);
var num = parseInt(tr.getElementsByTagName("input")[1].value);
var subTotle = parseFloat(price * num).toFixed(2);
tds[4].innerHTML = subTotle;
}
//復(fù)選框綁定單擊事件
for (var i = 0, len = checkInput.length; i < len; i++){
checkInput[i].onclick =function (){
//判斷全選按鈕，變更
if (this.className == "check_all check") {
for (var j = 0; j < len; j++){
checkInput[j].checked = this.checked;
}
}
if (this.checked == false) {
for (var k = 0,len2 = checkAllInput.length; k < len2; k++){
checkAllInput[k].checked = false;
}
}
getTotle();
}
}
//控制底部標(biāo)簽的顯示
selected.onclick = function(){
if (footer.className == "footer") {
footer.className == "footer show";
} else {
footer.className == "footer";
}
}
//圖片縮略圖的取消選擇按鈕功能,e為事件對象
selectedViewList.onclick = function(e){
//兼容低版本的IE
/* if (e){
e = e;
}else{
e = window.event;
} */
var e = e || window.event;
var el = e.srcElement;
if (el.className == "del") {
var index = el.getAttribute("index");
var input = tr[index].getElementsByTagName("input")[0];
input.checked = false;
input.onclick();
}
}
//實現(xiàn)加減、刪除操作。同樣用事件代理的方法實現(xiàn)
for (var i = 0, len3 = tr.length; i < len3; i++){
tr[i].onclick = function(e){
var e = e || window.event;
var el = e.srcElement;
var clsName = el.className;
var input = this.getElementsByTagName("input")[1];
var inputValue = parseInt(input.value);
var reduce = this.getElementsByTagName("span")[1];
switch (clsName){
case "add":
/*parseInt(inputValue) ++;*/
input.value = inputValue + 1;
reduce.innerHTML ="-";
getSubTotle(this);
break;
case "reduce":
if(inputValue >= 1){
input.value = inputValue - 1;
}else{
reduce.innerHTML ="";
}
getSubTotle(this);
break;
case "delete":
var conf = confirm("確定刪除這個商品？");
if (conf) {
this.parentNode.removeChild(this);
}
break;
default:
break;
}
getTotle();
}
//處理從手動輸入商品數(shù)量
tr[i].getElementsByTagName("input")[1].onkeyup = function(){
var val = this.value;
var tr = this.parentNode.parentNode;
if (isNaN(val) || val < 0 ) {
val = 1;
}
this.value = val;
getSubTotle(tr);
}
}
//全選刪除
deleteAll.onclick = function(){
if (selectTotle.innerHTML !="0") {
var conf = confirm("確定刪除這些商品？");
if (conf) {
for (var i = 0, len = tr.length; i < len; i++) {
var input = tr[i].getElementsByTagName("input")[0];
if(input.checked){
tr[i].parentNode.removeChild(tr[i]);
}
}
}
}
}
}
//取消選擇--采用事件代理---放到父元素上。
shoppingCart.css
.count_input{
width: 39px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
}
span.add, span.reduce{
height: 23px;
width: 27px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
line-height: 23px;
color: #444;
}
.closing{
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
background: #f40;
text-align: center;
font-family: 'Microsoft Yahei';
font-size: 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
text-decoration: none;
cursor: pointer;
}
.fr{
float: right;
}
.selected_totle, .selectAll, .select_all, .delete_all{
margin-top: 15px;
}
.footer{
height: 50px;
background: #e5e5e5;
font-family: 'Microsoft Yahei';
}
#selectTotle, #priceTotle,.subtotle {
color: #f40;
font-weight: 700;
font-size: 18px;
font-family: tohoma,arial;
padding: 5px;
}
以上就是js模擬淘寶購物車的全部項目代碼，歡迎大家學(xué)習(xí)品鑒，從中得到收獲。
相關(guān)文章
微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持實例詳解
這篇文章主要介紹了微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持,結(jié)合實例形式分析了微信小程序解密敏感信息及獲取session保持登陸狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這個其實就是利用qq官方提供的東西，簡單的通過圖片來測試是否在線，隱身也是不在線狀態(tài)。純粹學(xué)習(xí)使用。2010-04-04
layui 圖片上傳+表單提交+ Spring MVC的實例
今天小編就為大家分享一篇layui 圖片上傳+表單提交+ Spring MVC的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了如何封裝屬于自己的JS組件，對js組件擴展以及封裝用法的認(rèn)識和總結(jié)，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要給大家介紹了關(guān)于ES6入門教程之let、const使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了百度地圖給map添加右鍵菜單（判斷是否為marker） 的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
JS實現(xiàn)窗口加載時模擬鼠標(biāo)移動的方法
這篇文章主要介紹了JS實現(xiàn)窗口加載時模擬鼠標(biāo)移動的方法,涉及javascript鼠標(biāo)事件的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了移動端吸頂fixbar的解決方案詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
原生js實現(xiàn)簡單滑動解鎖功能?js實現(xiàn)滑動拼圖解鎖
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)簡單滑動解鎖功能，js實現(xiàn)滑動拼圖解鎖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02