js簡單購物車實現方法

阿新 • • 發佈：2018-12-21

這個是之前寫的專案HTML css 和js 寫的

點選結算後

HTML程式碼

<div class="shenti8">
				<span style="color: #000000; font-size: 15px;">您以選購以下商品</span>
			</div>
			<div class="shenti9">
				<div class="deltree">
					
				
				<div id="shenti1">
					<div id="shenti2"><span style="color: #000000; font-size:12.5px ;">商品名</span></div>
					<div id="shenti3"><span style="color: #000000; font-size:12.5px ;">單品積分</span></div>
					<div id="shenti4"><span style="color: #000000; font-size:12.5px ;">市場價</span></div>
					<div id="shenti5"><span style="color: #000000; font-size:12.5px ;">蔚藍價</span></div>
					<div id="shenti6"><span style="color: #000000; font-size:12.5px ;">數量</span></div>
					<div id="shenti7"><span style="color: #000000; font-size:12.5px ;">刪除</span></div>
				</div>
				<div id="shenti8">
					<div id="shenti9"><span style="color: blue; font-size: 12.5px;">私募(首部披露資本博弈祕密的金融...)</span></div>
					<div id="shenti10"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">189</span></div>
					<div id="shenti11"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">170.00</span></span>
					</div>
					<div id="shenti12"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">150.00</span>(59折)</span>
					</div>
					<div id="shenti13"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
					<div id="shenti14">
						<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">刪除</span></a>
					</div>
				</div>
				<div id="shenti15">
					<div id="shenti16"><span style="color: blue; font-size: 12.5px;">小團圓(張愛玲最神祕小說遺稿)</span></div>
					<div id="shenti17"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">173</span></div>
					<div id="shenti18"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">188.00</span></span>
					</div>
					<div id="shenti19"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">168.00</span>(62折)</span>
					</div>
					<div id="shenti20"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
					<div id="shenti21">
						<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">刪除</span></a>
					</div>
				</div>
				<div id="shenti22">
					<div id="shenti23"><span style="color: blue; font-size: 12.5px;">不抱怨的世界(暢銷全球80國的世界...)</span></div>
					<div id="shenti24"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">154</span></div>
					<div id="shenti25"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">168.00</span></span>
					</div>
					<div id="shenti26"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">88.00</span>(62折)</span>
					</div>
					<div id="shenti27"><input type="text" class="num_" size="1" value="2" style="text-align: center;" /></div>
					<div id="shenti28">
						<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">刪除</span></a>
					</div>
				</div>
				<div id="shenti29">
					<div id="shenti30"><span style="color: blue; font-size: 12.5px;">福瑪特雙桶洗衣粉XPB20-07S</span></div>
					<div id="shenti31"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">358</span></div>
					<div id="shenti32"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">158.00</span></span>
					</div>
					<div id="shenti33"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">78.00</span>(78折)</span>
					</div>
					<div id="shenti34"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
					<div id="shenti35">
						<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">刪除</span></a>
					</div>
				</div>
				<div id="shenti36">
					<div id="shenti37"><span style="color: blue; font-size: 12.5px;">PHP和MySQL&nbsp;web開發(原書第4版)</span></div>
					<div id="shenti38"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">712</span></div>
					<div id="shenti39"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">179.00</span></span>
					</div>
					<div id="shenti40"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">68.00</span>(75折)</span>
					</div>
					<div id="shenti41"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
					<div id="shenti42">
						<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">刪除</span></a>
					</div>
				</div>
				<div id="shenti43">

					<div id="shenti44"><span style="color: blue; font-size: 12.5px;">法布林昆蟲記(再買￥68.30即可參加“滿199元減10元現金”活動)</span></div>
					<div id="shenti45"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">10</span></div>
					<div id="shenti46"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">198.00</span> </span>
					</div>
					<div id="shenti47"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">170.00</span>(66折)</span>
					</div>
					<div id="shenti48"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
					<div id="shenti49">
						<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">刪除</span></a>
					</div>
				</div>
				</div>
				<div id="shenti50">
					<div id="shenti51">
						<a href="#"><span id="empty_" style="color: blue; font-size: 13px;">清空購物車</span></a>
					</div>
					<div id="shenti52"><span>您共節省金額:<span id="save_">
				
			</span> <br/>可獲得商品積分:<span id="integral_">
				
			</span> </span>
					</div>
					<span class="zongji">
				<h3><b>商品金額總計:</b></h3><span id="total_">
					
				</span>
					</span>
					<div id="shenti53">
						<input type="submit" value="" id="submit_" />
					</div>
				</div>

			</div>

css程式碼

			.shenti8 {
				margin-left: 550px;
				margin-top: 20px;
			}
			
			.shenti9 {
				width: 1000px;
				/*height: 370px;*/
				border: 1px solid black;
				margin-left: 200px;
			}
			
			#shenti1 {
				width: 1000px;
				height: 25px;
				background-color: #87CEFA;
			}
			
			#shenti2 {
				margin-left: 20px;
			}
			
			#shenti3 {
				margin-left: 510px;
				margin-top: -20px;
			}
			
			#shenti4 {
				margin-left: 645px;
				margin-top: -20px;
			}
			
			#shenti5 {
				margin-left: 770px;
				margin-top: -20px;
			}
			
			#shenti6 {
				margin-left: 875px;
				margin-top: -20px;
			}
			
			#shenti7 {
				margin-left: 955px;
				margin-top: -20px;
			}
			
			#shenti8 {
				width: 1000px;
				height: 40px;
				background-color: white;
			}
			
			#shenti9 {
				width: 420px;
			}
			
			#shenti9 span {
				margin-left: 10px;
			}
			
			#shenti10 {
				width: 50px;
				margin-left: 523px;
				margin-top: -15px;
			}
			
			#shenti11 {
				width: 50px;
				margin-left: 640px;
				margin-top: -21px;
			}
			
			#shenti12 {
				width: 100px;
				margin-left: 746px;
				margin-top: -21px;
			}
			
			#shenti13 {
				width: 50px;
				margin-left: 868px;
				margin-top: -21px;
			}
			
			#shenti14 {
				width: 50px;
				margin-left: 955px;
				margin-top: -21px;
			}
			
			#shenti15 {
				width: 1000px;
				height: 40px;
				background-color: peachpuff;
			}
			
			#shenti16 {
				width: 420px;
			}
			
			#shenti16 span {
				margin-left: 10px;
			}
			
			#shenti17 {
				width: 50px;
				margin-left: 523px;
				margin-top: -15px;
			}
			
			#shenti18 {
				width: 50px;
				margin-left: 640px;
				margin-top: -21px;
			}
			
			#shenti19 {
				width: 100px;
				margin-left: 746px;
				margin-top: -21px;
			}
			
			#shenti20 {
				width: 50px;
				margin-left: 868px;
				margin-top: -21px;
			}
			
			#shenti21 {
				width: 50px;
				margin-left: 955px;
				margin-top: -21px;
			}
			
			#shenti22 {
				width: 1000px;
				height: 40px;
				background-color: white;
			}
			
			#shenti23 {
				width: 420px;
			}
			
			#shenti23 span {
				margin-left: 10px;
			}
			
			#shenti24 {
				width: 50px;
				margin-left: 523px;
				margin-top: -15px;
			}
			
			#shenti25 {
				width: 50px;
				margin-left: 640px;
				margin-top: -21px;
			}
			
			#shenti26 {
				width: 100px;
				margin-left: 746px;
				margin-top: -21px;
			}
			
			#shenti27 {
				width: 50px;
				margin-left: 868px;
				margin-top: -21px;
			}
			
			#shenti28 {
				width: 50px;
				margin-left: 955px;
				margin-top: -21px;
			}
			
			#shenti29 {
				width: 1000px;
				height: 40px;
				background-color: peachpuff;
			}
			
			#shenti30 {
				width: 420px;
			}
			
			#shenti30 span {
				margin-left: 10px;
			}
			
			#shenti31 {
				width: 50px;
				margin-left: 523px;
				margin-top: -15px;
			}
			
			#shenti32 {
				width: 50px;
				margin-left: 640px;
				margin-top: -21px;
			}
			
			#shenti33 {
				width: 100px;
				margin-left: 746px;
				margin-top: -21px;
			}
			
			#shenti34 {
				width: 50px;
				margin-left: 868px;
				margin-top: -21px;
			}
			
			#shenti35 {
				width: 50px;
				margin-left: 955px;
				margin-top: -21px;
			}
			
			#shenti36 {
				width: 1000px;
				height: 40px;
				background-color: white;
			}
			
			#shenti37 {
				width: 420px;
			}
			
			#shenti37 span {
				margin-left: 10px;
			}
			
			#shenti38 {
				width: 50px;
				margin-left: 523px;
				margin-top: -15px;
			}
			
			#shenti39 {
				width: 50px;
				margin-left: 640px;
				margin-top: -21px;
			}
			
			#shenti40 {
				width: 100px;
				margin-left: 746px;
				margin-top: -21px;
			}
			
			#shenti41 {
				width: 50px;
				margin-left: 868px;
				margin-top: -21px;
			}
			
			#shenti42 {
				width: 50px;
				margin-left: 955px;
				margin-top: -21px;
			}
			
			#shenti43 {
				width: 1000px;
				height: 40px;
				background-color: peachpuff;
			}
			
			#shenti44 {
				width: 420px;
			}
			
			#shenti44 span {
				margin-left: 10px;
			}
			
			#shenti45 {
				width: 50px;
				margin-left: 523px;
				margin-top: -15px;
			}
			
			#shenti46 {
				width: 50px;
				margin-left: 640px;
				margin-top: -21px;
			}
			
			#shenti47 {
				width: 100px;
				margin-left: 746px;
				margin-top: -21px;
			}
			
			#shenti48 {
				width: 50px;
				margin-left: 868px;
				margin-top: -21px;
			}
			
			#shenti49 {
				width: 50px;
				margin-left: 955px;
				margin-top: -21px;
			}
			
			#shenti50 {
				width: 1000px;
				height: 106px;
				background-color: #87CEFA;
			}
			
			#shenti51 {
				width: 70px;
				margin-left: 20px;
			}
			
			#shenti52 {
				width: 300px;
				height: 100px;
				margin-left: 455px;
			}
			
			#shenti53 {
				margin-left: 820px;
				margin-top: -90px;
			}

js程式碼

//刪除方法cancel();
//結算方法settlement();
var price=[];//商品價格
var wlprice=[];//蔚藍價格
var num=[];//數量


function settlement(){
	
}

$(function(){
	$("#submit_").click(function(){
		//$("#total_").val(null);
		var total=0;
		var savemoney=0;
		var integral=0;
		var a=$(".price_").length;//價格長度
	for (var i = 0; i < a; i++) {//把價格存入price陣列中
		price[i]=$(".price_").eq(i).text();
		//alert(price[i])
	}	
	var b=$(".wlprice_").length;//把蔚藍價格存入wlprice陣列中
	for (var j = 0; j < b; j++) {
		wlprice[j]=$(".wlprice_").eq(j).text();
		//alert(wlprice[j])
	}
	var c=$(".num_").length;
	for (var q = 0; q < b; q++) {//把數量存入num陣列中
		num[q]=$(".num_").eq(q).val();
		//alert(num[q])
	}
	//計算價格
	for (var w = 0; w < c; w++) {
		total=total+wlprice[w]*num[w];//計算價格
		savemoney=savemoney+price[w]*num[w];//計算原價格
	}
	for (var r = 0; r < c; r++) {
		var deltree1= $(".deltree_class").eq(r).text();//計算積分
		var deltree2=parseInt(deltree1);
		integral=integral+deltree2*num[r];
	}
	//可獲得積分
	$("#integral_").text(integral);
	//省錢
	var save1=savemoney-total;
	$("#save_").text(save1);
	//把值傳入標籤
	$("#total_").text(total);
	//alert(total)
	})
	//刪除商品
	$(".drop_").click(function(){
		$(this).parent().parent().parent().remove();
	})
	//清空購物車
	$("#empty_").click(function(){
		$(".deltree").remove();
	})
	//商品推薦
	$(".slide_").click(function(){
		$(".slide_div").slideToggle();
	})
})

js簡單購物車實現方法

這個是之前寫的專案HTML css 和js 寫的點選結算後 HTML程式碼 <div class="shenti8"> <span style="color: #000000; font-size: 15px;">您以選購以下商品

C# interface 類簡單案例實現方法

今天沒什麼事，突然想起來java 的interface介面類。在C# 我寫程式的時候很少用，今天突然想起來研究了一下！邏輯方法幾乎一樣的，簡單的一個三成架構可能以後還會忘記先留一個筆記吧！軟體：vs2008 動軟程式碼生成器自動資料sql 架構窗體載入

JS&簡單POI實現前端多個jqgrid列表匯出Excel

前兩天接到一個需求，使用者需要將前端展示的多個jqgrid批量匯出，因為jqgrid是動態生成的多個列表，並且具有相同行合併效果，由於每個列表沒有分頁，所以打算通過前端將資料收集，而不是利用POI進行

三級聯動js,jQuery的實現方法

三級聯動（省-市-縣） 1,獲取包含省-市-縣的js檔案：http://download.csdn.net/detail/dengxt/9657613 下載好js檔案，引入

【微信授權】極其簡單的實現方法

強烈推薦使用一個工具包，在maven的中心倉庫中搜索"weixin-java"就可以搜尋到，感謝這位大佬的作品，大大簡化了微信端開發的難度。接下來是一個簡單例子，是我在我的實際專案中抽取出來的一部分，專案使用的是springboot框架，但是無論使用什麼框架微信授權的步驟

JSP（6）簡單購物車實現

兩個jsp頁面之間跳轉需要通過Servlet控制器實現 1 建立資料庫表 -- 建立一個序列，使book的id自增長 create sequence book_seq start with

如何將linq查詢的結果轉換為DataTable,最簡單的實現方法

public static DataTable CopyToDataTable<T>(this IEnumerable<T> array) { var ret = new DataTable(); foreach (PropertyDescrip

再來說一說PHP購物車實現方法

購物車應該是用處比較多的一個功能點，這裡寫了個簡單的php購物車程式碼,從增加購物產品與發生購買了,在商城開發中,這個功能是少不了的,我們不需要資料庫,用了txt文字檔案來操作使用者購物的內容增加商品到購物車,程式碼如下: <?php // // add

通過原生js 簡單的實現過濾html標籤功能

使用場景：想輸出一個div裡的純文字內容，例如： <div id="divA"> This is <span>some</span> text <br&

tornado websocket程式設計(1) 初識websocket ——簡單購物車實現

tornado websocket程式設計：初識websocket ——簡單購物車實 app.py 基本結構（或者說是一個手腳架吧，一步一步的新增我們需要的功能） #!/usr/bin/env python # -*-coding:utf-8

js簡單的實現點選選中點選取消的效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

js預設引數實現方法

function simue (){ var a = arguments[0] ? arguments[0] : 1; var b = arguments[1] ? arguments[1] : 2; return a+b; } alert( simue() )

js:ajax的get方法實現簡單的搜索框提示

eas cut add index title 節點 subst 直接 foreach 效果演示：一，使用nodejs搭建後臺環境，通過ajax的get方法將文本框中的值，實時傳輸到後臺進行比較，後臺返回相應的結果，將結果返回到ul中 1，創建路由 app4.js /

JS簡單實現：根據獎品權重計算中獎概率實現抽獎的方法

本文主要介紹：使用 JS 根據獎品權重計算中獎概率實現抽獎的方法。一、示例場景 1.1、設定抽獎活動的獎項名稱獎項名稱：["一等獎", "二等獎", "三等獎", "未中獎"]。假設抽獎活動設定了這四個獎項，當然開發者可以擴充套件更多。 var prizes = ["一等獎","二等獎","三

Asp.net基於session實現購物車的方法

lai 程序 clas contain ext info border mode man 本文實例講述了asp.net基於session實現購物車的方法。分享給大家供大家參考，具體如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1

JS簡單實現自定義右鍵菜單

ans idt 右鍵動畫忘記 span spa round 部分 RT，一個簡單的例子，僅僅講述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolu

jQuery基於json與cookie實現購物車的方法

構造 exp als com else cookies 一個可選參數 int /** * 添加商品及數量到購物車cookie中,返回當前商品在cookie中的總數 */ function AddToShoppingCar(id, num, t

Unity一個彈痕的簡單實現方法

註意 allow 由於 div img determine 效率 pda 場景之前知道一個方法比較復雜就是取出貼圖，類似於從上到下從左到右的去遍歷一張圖，去除像素點改變像素點。今天在選丞大佬那看到下面這個方法，覺得十分簡單，原理應該是相同的吧。官方文檔： https:/

Android平臺Camera實時濾鏡實現方法探討(十)--代碼地址以及簡單介紹（20160118更新）

div iss 將在 spa 方法 target 用途 net dsm 簡單做了個相機和圖片編輯模塊，時間原因非常多功能還沒有做。尚有BUG，見諒，將在以後抽時間改動代碼地址 PS：請點個Star^-^ -----------------------

C#在WinForm中使用WebKit傳遞js對象實現與網頁交互的方法

復制代碼 dll ssa 所有添加 spa load net clas 這篇文章主要介紹了C#在WinForm中使用WebKit傳遞js對象實現與網頁交互的方法,涉及針對WebBroswer控件及WebKit控件的相關使用技巧,需要的朋友可以參考下本文實例講述了C#在W

js簡單購物車實現方法

相關推薦