购物车的收货地址js php,Javascript实现购物车功能的详细代码
我們肯定都很熟悉商品購物車這一功能，每當(dāng)我們在某寶某東上購買商品的時候，看中了哪件商品，就會加入購物車中，最后結(jié)算。購物車這一功能，方便消費(fèi)者對商品進(jìn)行管理，可以添加商品，刪除商品，選中購物車中的某一項或幾項商品，最后商品總價也會隨著消費(fèi)者的操作隨著變化。
現(xiàn)在，筆者對購物車進(jìn)行了簡單實現(xiàn)，能夠?qū)崿F(xiàn)真實購物車當(dāng)中的大部分功能。在本示例當(dāng)中，用到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知識點，同時，采用三層架構(gòu)方式對購物車進(jìn)行設(shè)計，對javascript的綜合應(yīng)用較強(qiáng)，對javascript初學(xué)者進(jìn)階有一定的益處。
請看主頁效果圖：
現(xiàn)在讀者已經(jīng)對主頁的效果圖進(jìn)行了了解，我在這里附上主頁的html代碼，供讀者參考，建議讀者根據(jù)自己的思路寫代碼。
請看html代碼：
商品列表頁面商品列表
我的購物車0
智能手表酷黑，棒，棒，棒，棒￥998
添加購物車
智能手機(jī)001金紅色，酷酷酷酷￥1998
添加購物車
華為手機(jī)002帥帥帥帥帥帥帥帥帥帥￥998
添加購物車
華為手機(jī)003杠杠的￥2000
添加購物車
html結(jié)構(gòu)代碼有了之后，就可以對主頁進(jìn)行css表現(xiàn)設(shè)計，這里不對css進(jìn)行過多講解。
我們對主頁進(jìn)行設(shè)計之后，就可以進(jìn)行與主頁相關(guān)的DOM操作，涉及到添加按鈕的點擊事件，cookie和json的應(yīng)用，cookie主要為了讓當(dāng)前數(shù)據(jù)與購物車進(jìn)行共享，以方便操作。請看與之相關(guān)的javascript代碼：
這是index.js代碼，主要是主頁的相關(guān)操作：
/*
思路：
第一步：獲取所要操作的節(jié)點對象
第二步：當(dāng)頁面加載完后，需要計算本地cookie存了多少【個】商品，把個數(shù)賦值給ccount
第三步：為每一個商品對應(yīng)的添加購物車按鈕綁定一個點擊事件onclick
更改本地的cookie
獲取當(dāng)前商品的pid
循環(huán)遍歷本地的cookie轉(zhuǎn)換后的數(shù)組，取出每一個對象的pid進(jìn)行對比，若相等則該商品不是第一次添加
從購物車中取出該商品，然后更pCount值追加1
否則：創(chuàng)建一個新的對象，保存到購物中。同時該商品的數(shù)量為1
*/
var ccount = document.getElementById("ccount"); //顯示商品總數(shù)量的標(biāo)簽節(jié)點對象
var btns = document.querySelectorAll(".list dl dd button"); //所有的購物車按鈕
//約定好用名稱為datas的cookie來存放購物車?yán)锏臄?shù)據(jù)信息 datas里所存放的就是一個json字符串
var listStr = cookieObj.get("datas");
/*判斷一下本地是否有一個購物車(datas)，沒有的話，創(chuàng)建一個空的購物車，有的話就直接拿來使用*/
if(!listStr) { //沒有購物車 datas json
cookieObj.set({
name: "datas",
value: "[]"
});
listStr = cookieObj.get("datas");
}
var listObj = JSON.parse(listStr); //數(shù)組
/*循環(huán)遍歷數(shù)組，獲取每一個對象中的pCount值相加總和*/
var totalCount = 0; //默認(rèn)為0
for(var i = 0, len = listObj.length; i < len; i++) {
totalCount = listObj[i].pCount + totalCount;
}
ccount.innerHTML = totalCount;
/*循環(huán)為每一個按鈕添加點擊事件*/
for(var i = 0, len = btns.length; i < len; i++) {
btns[i].onclick = function() {
var dl = this.parentNode.parentNode;
var pid = dl.getAttribute("pid");//獲取自定義屬性
var arrs = dl.children;//獲取所有子節(jié)點
if(checkObjByPid(pid)) {
listObj = updateObjById(pid, 1)
} else {
var imgSrc = arrs[0].firstElementChild.src;
var pName = arrs[1].innerHTML;
var pDesc = arrs[2].innerHTML;
var price = arrs[3].firstElementChild.innerHTML;
var obj = {
pid: pid,
pImg: imgSrc,
pName: pName,
pDesc: pDesc,
price: price,
pCount: 1
};
listObj.push(obj)
listObj = updateData(listObj);
}
ccount.innerHTML = getTotalCount();
}
}
這是cookie.js的代碼，主要涉及cookie的設(shè)置獲取操作，采用單例設(shè)計模式進(jìn)行了封裝設(shè)計，請看代碼：
/*
單例設(shè)計模式
完整形式：[]中是可選項
document.cookie = “name=value[;expires=date][;path=path-to-resource][;domain=域名][;secure]”
*/
var cookieObj = {
/*
增加或修改cookie
參數(shù)：o 對象{}
name:string cookie名
value:string cookie值
expires:Date對象 過期時間
path:string 路徑限制
domain:string 域名限制
secure:boolean true https false或undeinfed
*/
set: function(o) {
var cookieStr = encodeURIComponent(o.name) + "=" + encodeURIComponent(o.value);
if(o.expires) {
cookieStr += ";expires=" + o.expires;
}
if(o.path) {
cookieStr += ";path=" + o.path;
}
if(o.domain) {
cookieStr += ";domain=" + o.domain;
}
if(o.secure) {
cookieStr += ";secure";
}
document.cookie = cookieStr;
},
/*
刪除
參數(shù)：n string cookie的名字
*/
del: function(n) {
var date = new Date();
date.setHours(-1);
//this代表的是當(dāng)前函數(shù)的對象
this.set({
name: n,
expires: date
});
},
/*查找*/
get: function(n) {
n = encodeURIComponent(n);
var cooikeTotal = document.cookie;
var cookies = cooikeTotal.split("; ");
for(var i = 0, len = cookies.length; i < len; i++) {
var arr = cookies[i].split("=");
if(n == arr[0]) {
return decodeURIComponent(arr[1]);
}
}
}
}
下面的是server.js代碼，主要對購物車中各種操作進(jìn)行了封裝，比如商品個數(shù)統(tǒng)計，更新獲取本地數(shù)據(jù)等操作，方便代碼管理，請看代碼：
/*
功能：查看本地數(shù)據(jù)中是否含有指定的對象(商品)，根據(jù)id
參數(shù)：id：商品的標(biāo)識
*/
function checkObjByPid(id) {
var jsonStr = cookieObj.get("datas");
var jsonObj = JSON.parse(jsonStr);
var isExist = false;
for(var i = 0, len = jsonObj.length; i < len; i++) {
if(jsonObj[i].pid == id) {
isExist = true;
break;
}
}
return isExist; //return false;
}
/*
功能：更新本地數(shù)據(jù)
參數(shù)：arr 數(shù)組對象
返回一個值：最新的本地轉(zhuǎn)換后的數(shù)組對象
* */
function updateData(arr) {
var jsonStr = JSON.stringify(arr);
cookieObj.set({
name: "datas",
value: jsonStr
});
jsonStr = cookieObj.get("datas");
return JSON.parse(jsonStr);
}
/*
獲取商品的總數(shù)量
返回：數(shù)字
*/
function getTotalCount() {
/*循環(huán)遍歷數(shù)組，獲取每一個對象中的pCount值相加總和*/
var totalCount = 0; //默認(rèn)為0
var jsonStr = cookieObj.get("datas");
var listObj = JSON.parse(jsonStr);
for(var i = 0, len = listObj.length; i < len; i++) {
totalCount = listObj[i].pCount + totalCount;
}
return totalCount;
}
/*
更新本地數(shù)據(jù)根據(jù)pid
id:商品的標(biāo)識
*/
function updateObjById(id, num) {
var jsonStr = cookieObj.get("datas");
var listObj = JSON.parse(jsonStr);
for(var i = 0, len = listObj.length; i < len; i++) {
if(listObj[i].pid == id) {
listObj[i].pCount = listObj[i].pCount + num;
break;
}
}
return updateData(listObj)
}
/*
獲取本地數(shù)據(jù)
返回 數(shù)組對象
* */
function getAllData() {
var jsonStr = cookieObj.get("datas");
var listObj = JSON.parse(jsonStr);
return listObj;
}
function deleteObjByPid(id) {
var lisObj = getAllData();
for(var i = 0, len = lisObj.length; i < len; i++) {
if(lisObj[i].pid == id) {
lisObj.splice(i, 1);
break;
}
}
updateData(lisObj);
return lisObj;
}
因為上述代碼中涉及了進(jìn)入購物車后的一些操作，讀者看了之后可能會感動疑惑，不用擔(dān)心，下面請看點擊進(jìn)入我的購物車之后的分析。
請看效果圖：
筆者在主頁中點擊了三種商品，共點擊了七次，在購物車中出現(xiàn)了相應(yīng)商品以及價格計算。對于途中的各種信息，相信讀者一目了然。請看本購物車的html代碼：
購物車購物車
返回商品列表頁面
全選
圖片
描述
數(shù)量
單價
小計
操作
購物車?yán)餂]有任何商品總價格：￥0
在對購物車進(jìn)行相關(guān)的表現(xiàn)設(shè)計之后，既要進(jìn)行javascript行為設(shè)計，請看與本頁相關(guān)的cart.js代碼：
/*
思路：
第一步：當(dāng)頁面加載完后，根據(jù)本地的數(shù)據(jù)，動態(tài)生成表格(購物車列表)
獲取所要操作的節(jié)點對象
判斷購物車中是否有數(shù)據(jù)？
有：
顯示出購物列表
沒有：
提示購物車為空
第二步：當(dāng)購物車列表動態(tài)生成后，獲取tbody里所有 的checkeBox標(biāo)簽節(jié)點對象，看那個被選中就獲取對應(yīng)行小計進(jìn)行總價格運(yùn)算。
第三步：
為每一個checkbox添加一個onchange事件，根據(jù)操作更改總價格
第四步：全選
第五步：
為加減按鈕添加一個鼠標(biāo)點擊事件
更改該商品的數(shù)量
第六步：刪除
獲取所有的刪除按鈕
為刪除按鈕添加一個鼠標(biāo)點擊事件
刪除當(dāng)前行，并更新本地數(shù)據(jù)
*/
var listObj = getAllData();
var table = document.getElementById("table")
var box = document.getElementById("box")
var tbody = document.getElementById("tbody");
var totalPrice = document.getElementById("totalPrice");
var allCheck = document.getElementById("allCheck");
if(listObj.length == 0) { //購物車為空
box.className = "box";
table.className = "hide";
} else {
box.className = "box hide";
table.className = "";
for(var i = 0, len = listObj.length; i < len; i++) {
var tr = document.createElement("tr");
tr.setAttribute("pid", listObj[i].pid);
//{"pid":值,"pImg":值,"pName":值,"pDesc":值,"price":值,"pCount":1},
tr.innerHTML = '
' +'' +
'
' +'
' +'' +
'
' +'
' +listObj[i].pDesc +
'
' +'
' +'-+' +
'
' +'
' +'￥' + listObj[i].price + '' +
'
' +'
' +'￥' + listObj[i].price * listObj[i].pCount + '' +
'
' +'
' +'刪除' +
'
';tbody.appendChild(tr);
}
}
/*
功能：計算總價格
*/
var cks = document.querySelectorAll("tbody .ck");
function getTotalPrice() {
cks = document.querySelectorAll("tbody .ck");
var sum = 0;
for(var i = 0, len = cks.length; i < len; i++) {
if(cks[i].checked) { //如果當(dāng)前被選中
var tr = cks[i].parentNode.parentNode;
var temp = tr.children[5].firstElementChild.innerHTML;
sum = Number(temp) + sum;
}
}
return sum;
}
/*循環(huán)遍歷為每一個checkbox添加一個onchange事件*/
for(var i = 0, len = cks.length; i < len; i++) {
cks[i].onchange = function() {
checkAllChecked();
totalPrice.innerHTML = getTotalPrice();
}
}
/*全選實現(xiàn)*/
allCheck.onchange = function() {
if(this.checked) {
for(var i = 0, len = cks.length; i < len; i++) {
cks[i].checked = true;
}
} else {
for(var i = 0, len = cks.length; i < len; i++) {
cks[i].checked = false;
}
}
totalPrice.innerHTML = getTotalPrice();
}
var downs = document.querySelectorAll(".down"); //一組減的按鈕
var ups = document.querySelectorAll(".up"); //一組加的按鈕
var dels = document.querySelectorAll(".del"); //一組刪除按鈕
for(var i = 0, len = downs.length; i < len; i++) {
downs[i].onclick = function() {
var txtObj = this.nextElementSibling;//下一個兄弟節(jié)點
var tr = this.parentNode.parentNode;
var pid = tr.getAttribute("pid");
txtObj.value = txtObj.value - 1;
if(txtObj.value < 1) {
txtObj.value = 1;
updateObjById(pid, 0)
} else {
updateObjById(pid, -1)
}
tr.children[0].firstElementChild.checked = true;
checkAllChecked();
var price = tr.children[4].firstElementChild.innerHTML;
tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
totalPrice.innerHTML = getTotalPrice();
}
ups[i].onclick = function() {
var txtObj = this.previousElementSibling;//上一個兄弟節(jié)點
var tr = this.parentNode.parentNode;
var pid = tr.getAttribute("pid");
txtObj.value = Number(txtObj.value) + 1;
updateObjById(pid, 1)
tr.children[0].firstElementChild.checked = true;
checkAllChecked()
var price = tr.children[4].firstElementChild.innerHTML;
tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
totalPrice.innerHTML = getTotalPrice();
}
dels[i].onclick = function() {
var tr = this.parentNode.parentNode;
var pid = tr.getAttribute("pid")
if(confirm("確定刪除？")) {
//remove() 自殺
tr.remove();
listObj = deleteObjByPid(pid);
}
if(listObj.length == 0) { //購物車為空
box.className = "box";
table.className = "hide";
} else {
box.className = "box hide";
table.className = "";
}
totalPrice.innerHTML = getTotalPrice();
}
}
/*檢測是否要全選*/
function checkAllChecked() {
var isSelected = true; //全選是否會選中
for(var j = 0, len = cks.length; j < len; j++) {
if(cks[j].checked == false) {
isSelected = false;
break;
}
}
allCheck.checked = isSelected;
}
上述代碼完成了購物車中的相關(guān)操作，比如價格計算，商品數(shù)量更換，商品刪除等操作。
到這里我們已經(jīng)完成了購物車的大部分功能，我們對html，css, BOM,DOM,json,cookie等進(jìn)行了綜合應(yīng)用，相信讀者理解之后一定會對自己的javascript學(xué)習(xí)更進(jìn)一步，本示例中涉及的大部分代碼都在本頁中貼出，部分代碼資源未向讀者展示，讀者可以點擊下面的資源鏈接，下載本示例的全部代碼及圖片資料。本示例采用HBuilder編譯器編譯運(yùn)行，涉及cookie操作，請讀者自行安裝服務(wù)器或者添加到HBuilder中運(yùn)行查看。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
總結(jié)
以上是生活随笔為你收集整理的购物车的收货地址js php,Javascript实现购物车功能的详细代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue渲染两个不同的属性能连写吗？
- 下一篇： riak php7,Laravel中服务