国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

js實現購物車功能

來源:懂視網 責編:小OO 時間:2020-11-27 22:13:06
文檔

js實現購物車功能

本文實例為大家分享了js實現購物車功能的具體代碼,供大家參考,具體內容如下:購物車實現3種方式;1、利用cookie。優點:不占用服務器資源,可以永遠保存,不用考慮失效的問題。缺點: 對購買商品的數量是有限制的,存放數據的大小 不可以超過2k,用戶如果禁用cookie那么就木有辦法購買商品,卓越網實現了用戶當用戶禁用cookie,也可以購買。2、利用 session。優點:用戶禁用cookie,也可以購物。缺點:占用服務器資源,要考慮session失效的問題。3、利用數據庫;優點:可以記錄用戶的購買行為,便于數據分析用戶的喜好,推薦商品。缺點:給數據庫造成太大的壓力,如果數據量很大的話。購物車需求分析;1、可以添加商品到購物車中。2、可以刪除購物車中的商品。3、可以清空購物車;
推薦度:
導讀本文實例為大家分享了js實現購物車功能的具體代碼,供大家參考,具體內容如下:購物車實現3種方式;1、利用cookie。優點:不占用服務器資源,可以永遠保存,不用考慮失效的問題。缺點: 對購買商品的數量是有限制的,存放數據的大小 不可以超過2k,用戶如果禁用cookie那么就木有辦法購買商品,卓越網實現了用戶當用戶禁用cookie,也可以購買。2、利用 session。優點:用戶禁用cookie,也可以購物。缺點:占用服務器資源,要考慮session失效的問題。3、利用數據庫;優點:可以記錄用戶的購買行為,便于數據分析用戶的喜好,推薦商品。缺點:給數據庫造成太大的壓力,如果數據量很大的話。購物車需求分析;1、可以添加商品到購物車中。2、可以刪除購物車中的商品。3、可以清空購物車;

本文實例為大家分享了js實現購物車功能的具體代碼,供大家參考,具體內容如下

購物車實現3種方式

1、利用cookie

優點:不占用服務器資源,可以永遠保存,不用考慮失效的問題
缺點: 對購買商品的數量是有限制的,存放數據的大小 不可以超過2k,用戶如果禁用cookie那么就木有辦法購買商品,卓越網實現了用戶當用戶禁用cookie,也可以購買。

2、利用 session

優點:用戶禁用cookie,也可以購物
缺點:占用服務器資源,要考慮session失效的問題

3、利用數據庫

優點:可以記錄用戶的購買行為,便于數據分析用戶的喜好,推薦商品
缺點:給數據庫造成太大的壓力,如果數據量很大的話。

購物車需求分析

1、可以添加商品到購物車中

2、可以刪除購物車中的商品

3、可以清空購物車

4、可以更新購物車的商品

5、可以結算

js代碼

/**
 * Created by Administrator on 2017/9/3.
 */


/***
 * 購物車操作模塊
 *
 */

//商品類
/***
 * @name item
 * @example
 item(sku, name, price, quantity)
 * @params {string} sku 商品的標示
 * @params {string} name 商品的名字
 * @param {number} price 商品的價格
 * @param {number} quantity 商品的數量
 */
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, //是否打印調試信息
 'decimal' : decimal, //錢的精確到小數點后的位數
 'callback' : undefined
 };


 //暴露給外部的接口方法
 return {
 inited : false,
 init: function(option){
 //判斷用戶是否禁用cookie
 if(!window.navigator.cookieEnabled ){
 alert('您的瀏覽器不支持cookie無法使用購物車!,請設置允許設置cookie。');
 return false;
 }
 //從cookie中獲取購物車中的數據
 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){//根據sku標示查找商品
 //如果木有提供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的數組下標
 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('商品已經存在了');
 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){ //更新商品的數量
 //更新一個商品
 var index = this.getItemIndex(item.sku);
 if(index > -1){
 items[index].quantity = item.quantity;
 _saveCookie();
 }else{
 if(options.debug){
 _log('商品不存在');
 return false;
 }
 }
 },
 emptyCart: function(){
 //清空數組
 items.length = 0;
 _saveCookie();
 },
 checkout: function(){
 //點擊結算后的回調函數
 if(options.callback){
 options.callback();
 }
 },
 getTotalCount: function(sku){
 //獲取購物車商品的數量,如果傳某個商品的id,那么就返回該商品的數量
 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
 };


 /**
 * 設置cookie
 * @name setCookie
 * @example
 setCookie(name, value[, options])
 * @params {string} name 需要設置Cookie的鍵名
 * @params {string} value 需要設置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});
 }

 };

 //***********************工具方法********************/
 //顯示調試信息
 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頁面簡單調用

<!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); //添加商品到購物車,參數item
 shopCart.delItem('12345'); //從購物車中刪除商品,參數squ
// shopCart.emptyCart(); //清空購物車
 item.quantity = 4;
 alert(shopCart.getTotalPrice()); //獲取購物車中的數量,參數squ


 shopCart.findItem();//根據sku標示查找商品,參數squ
 //如果木有提供sku,則返回所有的item
 shopCart.getItemIndex('aa') //獲取item在items的數組下標,參數squ
 shopCart.updateQuantity(a) //更新商品的數量,參數item
 shopCart.getTotalCount()//獲取購物車商品的數量,如果傳某個商品的id,那么就返回該商品的數量,參數squ
 </script>

</body>
</html>

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

js實現購物車功能

本文實例為大家分享了js實現購物車功能的具體代碼,供大家參考,具體內容如下:購物車實現3種方式;1、利用cookie。優點:不占用服務器資源,可以永遠保存,不用考慮失效的問題。缺點: 對購買商品的數量是有限制的,存放數據的大小 不可以超過2k,用戶如果禁用cookie那么就木有辦法購買商品,卓越網實現了用戶當用戶禁用cookie,也可以購買。2、利用 session。優點:用戶禁用cookie,也可以購物。缺點:占用服務器資源,要考慮session失效的問題。3、利用數據庫;優點:可以記錄用戶的購買行為,便于數據分析用戶的喜好,推薦商品。缺點:給數據庫造成太大的壓力,如果數據量很大的話。購物車需求分析;1、可以添加商品到購物車中。2、可以刪除購物車中的商品。3、可以清空購物車;
推薦度:
標簽: 功能 購物車 實現
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 最新国产在线视频 | 日本1区2区3区电 | 亚洲精品综合久久中文字幕 | 日本a中文字幕 | 交换国产精品视频一区 | 91精品一区二区 | 毛片黄色视频 | 欧美日韩精品一区二区三区 | 欧美一区二区三区视频在线 | 国产一二三区视频 | 国产毛片一区二区三区精品 | 一边摸一边爽一边叫床视频 | 不卡视频在线 | 欧美在线一区二区三区不卡 | 日韩欧美一二三区 | 涩五月婷婷| 国产欧美综合精品一区二区 | 91精品久久久久久久久久 | 日韩专区第一页 | 免费精品国产日韩热久久 | 在线国产一区二区 | 国产成人99久久亚洲综合精品 | 欧美啊v| 国产精品ⅴ视频免费观看 | 欧美大陆日韩 | 青青青国产在线观看 | 欧美极品欧美日韩 | 久久频道毛片免费不卡片 | 日韩在线视频播放 | 日韩在线资源 | 毛片1级| 影音先锋亚洲综合小说在线 | 免费一级毛片 | 亚洲第一视频网站 | 国产美女视频黄a视频全免费网站 | 九九国产精品九九 | 国产不卡在线观看 | 精品国产一区二区三区成人 | 国产欧美日韩精品综合 | 中文字幕一区二区三区四区 | 日韩免费在线观看视频 |