js如何實現(xiàn)購物車功能
這篇文章主要介紹了js如何實現(xiàn)購物車功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
在做網(wǎng)站、成都網(wǎng)站建設(shè)過程中，需要針對客戶的行業(yè)特點、產(chǎn)品特性、目標(biāo)受眾和市場情況進行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計方向。成都創(chuàng)新互聯(lián)公司還需要根據(jù)客戶的需求進行功能模塊的開發(fā)和設(shè)計，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計和安全保護等功能。
JS是什么
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。
購物車實現(xiàn)3種方式
1、利用cookie
優(yōu)點：不占用服務(wù)器資源，可以永遠(yuǎn)保存，不用考慮失效的問題
缺點： 對購買商品的數(shù)量是有限制的，存放數(shù)據(jù)的大小 不可以超過2k，用戶如果禁用cookie那么就木有辦法購買商品，卓越網(wǎng)實現(xiàn)了用戶當(dāng)用戶禁用cookie，也可以購買。
2、利用 session
優(yōu)點：用戶禁用cookie，也可以購物
缺點：占用服務(wù)器資源，要考慮session失效的問題
3、利用數(shù)據(jù)庫
優(yōu)點：可以記錄用戶的購買行為，便于數(shù)據(jù)分析用戶的喜好，推薦商品
缺點：給數(shù)據(jù)庫造成太大的壓力，如果數(shù)據(jù)量很大的話。
購物車需求分析
1、可以添加商品到購物車中
2、可以刪除購物車中的商品
3、可以清空購物車
4、可以更新購物車的商品
5、可以結(jié)算
js代碼
/**
* Created by Administrator on 2017/9/3.
*/
/***
* 購物車操作模塊
*
*/
//商品類
/***
* @name item
* @example
item(sku, name, price, quantity)
* @params {string} sku 商品的標(biāo)示
* @params {string} name 商品的名字
* @param {number} price 商品的價格
* @param {number} quantity 商品的數(shù)量
*/
function item(sku, name, price, quantity){
this.sku = sku;
this.name = name;
this.price = price;
this.quantity = quantity;
}
var shopCart = function(window){
"use strict";
//全局變量
// note new new Date("2020-12-23") 在ie下面報錯，不支持這樣的語法
var items = [],cartName='kuaidian_shop_cart',expires = new Date( new Date().getTime()+86400000*30 )
,debug = true,decimal = 2;
var options = {
'cartName' : cartName, //cookie的名字
'expires' : expires, //cookie失效的時間
'debug' : debug, //是否打印調(diào)試信息
'decimal' : decimal, //錢的精確到小數(shù)點后的位數(shù)
'callback' : undefined
};
//暴露給外部的接口方法
return {
inited : false,
init: function(option){
//判斷用戶是否禁用cookie
if(!window.navigator.cookieEnabled ){
alert('您的瀏覽器不支持cookie無法使用購物車！,請設(shè)置允許設(shè)置cookie。');
return false;
}
//從cookie中獲取購物車中的數(shù)據(jù)
this.inited = true;
if(option){
extend(options,option);
}
var cookie = getCookie(options.cartName);
if(typeof cookie === 'undefined'){
setCookie(options.cartName,'',options.expires);
}else{
//每個item之間用&分開，item的屬性之間用|分割
var cookie = getCookie(options.cartName);
if(cookie){
var cItems = cookie.split('&');
for(var i=0,l=cItems.length;i<l;i++){
var cItem = cItems[i].split('|');
var item = {};
item.sku = cItem[0] || '';
item.name = cItem[1] || '';
item.price = cItem[2] || '';
item.quantity = cItem[3] || '';
items.push(item);
};
};
};
},
findItem: function(sku){//根據(jù)sku標(biāo)示查找商品
//如果木有提供sku,則返回所有的item
if(sku){
for(var i=0,l=items.length;i<l;i++){
var item = items[i];
if(item.sku === sku){
return item;
}
}
return undefined;
}else{
return items;
}
},
getItemIndex : function(sku){ //獲取item在items的數(shù)組下標(biāo)
for(var i=0,l=items.length;i<l;i++){
var item = items[i];
if(item.sku == sku){
return i;
}
}
//木有找到返回-1
return -1;
},
addItem: function(item){ //增加一個新商品到購物車
//添加一個商品
if(this.findItem(item.sku)){
if(options.debug){
_log('商品已經(jīng)存在了');
return false;
}
}
items.push(item);
_saveCookie();
return true;
},
delItem: function(sku){ //從購物車中刪除一個商品
//刪除一個商品
var index = this.getItemIndex(sku);
if(index > -1){
items.splice(index,1);
_saveCookie();
}else{
if(options.debug){
_log('商品不存在');
return false;
}
}
},
updateQuantity: function(item){ //更新商品的數(shù)量
//更新一個商品
var index = this.getItemIndex(item.sku);
if(index > -1){
items[index].quantity = item.quantity;
_saveCookie();
}else{
if(options.debug){
_log('商品不存在');
return false;
}
}
},
emptyCart: function(){
//清空數(shù)組
items.length = 0;
_saveCookie();
},
checkout: function(){
//點擊結(jié)算后的回調(diào)函數(shù)
if(options.callback){
options.callback();
}
},
getTotalCount: function(sku){
//獲取購物車商品的數(shù)量，如果傳某個商品的id，那么就返回該商品的數(shù)量
var totalCount = 0;
if(sku){
totalCount = (typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).quantity );
}else{
for(var i=0,l=items.length;i<l;i++){
totalCount += (parseInt(items[i].quantity) === 'NaN' ? 0 : parseInt(items[i].quantity )) ;
}
}
return totalCount;
},
getTotalPrice : function(sku){
//獲取購物車商品的總價格 ,如果傳某個商品的id，那么就返回該商品的總價格
var totalPrice = 0.0;
if(sku){
var num = parseInt((typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).quantity )),
price = parseFloat((typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).price ));
num = num=== 'NaN' ? 0 : num;
price = price === 'NaN' ? 0 : price;
totalPrice = price * num;
}else{
for(var i=0,l=items.length;i<l;i++){
totalPrice += (parseFloat(items[i].price ) * parseInt(items[i].quantity));
}
}
return totalPrice.toFixed(options.decimal);
},
getCookie : getCookie,
setCookie : setCookie
};
/**
* 設(shè)置cookie
* @name setCookie
* @example
setCookie(name, value[, options])
* @params {string} name 需要設(shè)置Cookie的鍵名
* @params {string} value 需要設(shè)置Cookie的值
* @params {string} [path] cookie路徑
* @params {Date} [expires] cookie過期時間
*/
function setCookie(name, value, options) {
options = options || {};
var expires = options.expires || null;
var path = options.path || "/";
var domain = options.domain || document.domain;
var secure = options.secure || null;
/**
document.cookie = name + "=" + escape(value)
+ ((expires) ? "; expires=" + expires.toGMTString() : "")
+ "; path=" + path
+ "; domain=" + domain ;
+ ((secure) ? "; secure" : "");
*/
var str = name + "=" + encodeURIComponent(value)
+ ((expires) ? "; expires=" + expires.toGMTString() : "")
+ "; path=/";
document.cookie = str;
};
/**
* 獲取cookie的值
* @name getCookie
* @example
getCookie(name)
* @param {string} name 需要獲取Cookie的鍵名
* @return {string|null} 獲取的Cookie值，獲取不到時返回null
*/
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name
+ "=([^;]*)(;|$)"));
if (arr != null) {
return decodeURIComponent(arr[2]);
}
return undefined;
};
//***********************私有方法********************/
function _saveCookie(){
var i=0,l=items.length;
if(l>0){
var tItems = [];
for(;i<l;i++){
var item = items[i];
tItems[i] = item.sku + '|' +item.name + '|' + item.price + '|' + item.quantity;
};
var str = tItems.join('&');
setCookie(options.cartName, str, {expires:options.expires});
}else{
setCookie(options.cartName, '', {expires:options.expires});
}
};
//***********************工具方法********************/
//顯示調(diào)試信息
function _log(info){
if(typeof console != 'undefined'){
console.log(info);
}
};
//繼承屬性
function extend(destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
};
}(typeof window === 'undifined' ? this: window);HTML頁面簡單調(diào)用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="./shop.js"></script>
<script>
shopCart.init({
'decimal' : 4
});
var a = new item('aa','bb',12,22);
shopCart.addItem(a); //添加商品到購物車,參數(shù)item
shopCart.delItem('12345'); //從購物車中刪除商品,參數(shù)squ
// shopCart.emptyCart(); //清空購物車
item.quantity = 4;
alert(shopCart.getTotalPrice()); //獲取購物車中的數(shù)量,參數(shù)squ
shopCart.findItem();//根據(jù)sku標(biāo)示查找商品,參數(shù)squ
//如果木有提供sku,則返回所有的item
shopCart.getItemIndex('aa') //獲取item在items的數(shù)組下標(biāo),參數(shù)squ
shopCart.updateQuantity(a) //更新商品的數(shù)量,參數(shù)item
shopCart.getTotalCount()//獲取購物車商品的數(shù)量，如果傳某個商品的id，那么就返回該商品的數(shù)量,參數(shù)squ
</script>
</body>
</html>感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js如何實現(xiàn)購物車功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前題目：js如何實現(xiàn)購物車功能
分享鏈接：http://chinadenli.net/article44/gdioee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)站制作、做網(wǎng)站、網(wǎng)站改版、網(wǎng)站設(shè)計
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- SEO網(wǎng)站排名的影響因素有哪些（頁內(nèi)鏈） 2017-10-03
- 企業(yè)網(wǎng)站建設(shè)中提升網(wǎng)站排名 2016-09-24
- app開發(fā)看驚人黑幕：app刷假用戶月收入百萬 2022-06-04
- SEO優(yōu)化哪些操作可以使網(wǎng)站排名急速增長? 2020-09-21
- wap網(wǎng)站排名技巧有哪些？移動網(wǎng)站排名方案 2022-08-31
- 煙臺網(wǎng)站排名利用TAG標(biāo)簽優(yōu)化聚合頁要害字的要容 2023-02-06
- 網(wǎng)站排名不好的原因有哪些? 2015-12-22
- 影響網(wǎng)站排名優(yōu)化幾種因素你了解多少？ 2020-12-15
- 網(wǎng)站排名趨勢“穩(wěn)定”下滑如何優(yōu)化 2022-07-29
- 煙臺網(wǎng)站排名網(wǎng)站優(yōu)化排名,在現(xiàn)代的互聯(lián)網(wǎng)時代，從事SEO還能 2023-01-06
- 菏澤網(wǎng)站排名根據(jù)用戶的搜索需求對關(guān)鍵詞規(guī)劃，打造出精彩的SEO流量文章 2023-01-22
- 快速提升網(wǎng)站排名的六個方法 2021-09-07