JavaScript（購物Demo）

小東昇職記發表於2018-12-14
JavaScript

JavaScript是嵌入HTML中在瀏覽器中的指令碼語言，具有與java和C語言類似的語法

  1. 一種網頁程式設計技術，用來向HTML頁面新增互動式行為
  2. 直接嵌入HTML頁面
  3. 由瀏覽器解釋執行程式碼，不進行預編譯

資料型別轉換函式

  1. toString：所有資料型別均可轉換為String型別；
  2. parseInt：強制轉換成整數，如果不能轉換，則返回NaN（not a number）；
  3. parseFloat：強制轉換成浮點型，如果不能轉換，則返回NaN；
  4. typeof：查詢當前型別，返回string/number/boolean/object/function/undefine    例如：typeof（"test"+3），返回“string”；
  5. isNaN(is not a number?)，判斷被檢測表示式經過轉換後是不是一個數，如果被檢測表示式不是數則返回true，否則返回false；
  6. null：null在程式中代表“無值”或者“無物件”，可以通過給一個變數賦值null來清除變數的內容；
  7. undefined：宣告瞭變數但從未賦值，物件屬性不存在；

document物件

innerText：設定或獲取位於物件起始和結束標籤內的文字；

innerHTML:設定或獲取位於物件起始和結束標籤內的HTML；

節點屬性

  1. getAttribute():方法：根據屬性名稱獲取屬性；
  2. setAttribute()
  3. removeAttribute()

查詢節點

如果需要操作HTML元素，必須首先找到該元素

查詢節點的方式：

  1. 通過id查詢   document.getElementById("idname")  通過制定的ID來返回元素節點，忽略文件的結構；查詢整個HTML文件中的任何HTML元素；如果ID錯誤，則返回null。
  2. 通過層次（節點關係）查詢   parentNode---遵循文件的上下層次結構，查詢單個父節點  childNodes---遵循文件的上下層次結構，查詢多個子節點
  3. 通過標籤名稱查詢  getElementsByTagName()---根據指定的標籤名稱返回所有的元素；忽略文件結構；查詢整個HTML文件中的所有元素；如果標籤從、名稱錯誤，則返回長度為0的節點列表。返回一個節點列表（陣列）：使用節點類表的length屬性獲取個數；[index]:定位具體的元素
  4. 通過name屬性查詢 document.getElementsByName()

建立新節點

  1. documen.createElement(elementname)  elementname:要建立元素標籤名稱；返回新建立的節點

新增新節點

  1. parentNode.appendChild(newNode)  追加：新節點作為父節點的最後一個子節點新增
  2. parentNode.insertBefore(newNode,refNode)  refNode:參考節點，新節點位於此節點之前新增

刪除節點

node.removeChild(childNode)   

刪除某子節點；childNode必須是node的子節點。

自定義物件

  1. 自定義物件是一種特殊的資料型別，由屬性和方法封裝而成  ----屬性指與物件有關的值：物件名.屬性 ----方法指物件可以執行的行為或可以完全的功能：物件名.方法名（）
  2. 建立自定義物件 ---直接建立物件  ---使用構造器建立物件   ---使用JSON建立物件

JSON是一種輕量級的資料交換格式

  1. 使用名/值對的方式定義
  2. 名稱需要使用“”引起來
  3. 多對定義之間使用，隔開
  4. 名稱可以是屬性
  5. 字串型別的屬性值，需要使用“”引起來

事件屬性

  1. 滑鼠事件：onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmouseout
  2. 鍵盤事件：onkeydown,onkeyup
  3. 狀態事件：onload,onchange,onfource,onblur,onsubmit

event物件

  1. 任何事件觸發後將會產生一個event物件
  2. event物件記錄事件發生的滑鼠位置、鍵盤按鍵狀態和觸發物件等資訊   ---獲得event物件 ---使用event物件或的相關資訊，如單擊位置，觸發物件等
  3. 常用屬相：clientX/clientY/cancelBubble等
  4. 對於event物件，經常需要獲得事件源(通常要考慮瀏覽器相容問題)
  5. IE瀏覽器：event.srcElement
  6. Firefox瀏覽器：event.target

string物件

  1. 大小寫轉換方法 ---x.toLowerCase()   --x.toUpperCase()
  2. 獲取指定字元：
  3. x.charAt(index)：返回指定位置的字元
  4. x.charCodeAt(index)：返回指定位置字元的Unicode編碼
  5. index：字元位置
  6. 查詢指定字串：
  7. x.indexOf(findstr,[index])
  8. x.lastIndexOf(findstr,[index])
  9. findstr：查詢的字串
  10. index：開始查詢的位置索引，可以省略
  11. 返回find石頭人在X中出現的首字元位置索引，如果沒有找到，則返回-1
  12. lastIndexOf：從後面找起
  13. 獲取子字串：
  14. x.substring(start,[end])
  15. 替換子字串：
  16. x.replace(findstr,tostr)
  17. 查分子字串：
  18. x.split(bystr,[howmany])

number物件

  1. toFixed(num):轉換為字串，並並保留小數點後一定位數

array物件

  1. 建立陣列物件
  2. var a1 =new Array();
  3. 獲取陣列元素的個數：length屬性
  4. 訪問數a1[1]；
  5. x.reverse()；---反向陣列---改變陣列x中數值的順序
  6. x.sort([sortfunc])：陣列排序

date物件

讀取時間毫秒數：getTime(),setTime()

讀寫時間分量--getDate(),getDay(),getFullYear()

--------------------setDate(),setDay(),setFullYear()

轉換為字串

--toString()

--toLocaleTimeString()

--toLocaleDateString()

展示基於JavaScript的一個小小的購物demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>購物</title>
<style type="text/css">
	body{
	background: #ccceee;	
}
	h1 {
	text-align: center;
}
	table {
	width:60%;
	margin:	100px auto;
	border: 1px solid #ffffff;
	border-collapse: collapse;
	text-align: center;
}
	table th ,table td  {
	border: 1px solid #ffffff;
	padding: 5px;
}
	input:hover {
	background-color: yellow;
}
</style>
<script type="text/javascript">
	function addshopping(btn) {
		//獲取當前行的資訊
		var tr = btn.parentNode.parentNode;
		//獲取當前行下單元格里面的資訊
		var tds = tr.getElementsByTagName("td");
		//獲取商品名
		var name = tds[0].innerHTML;
		//獲取商品的價格
		var price = tds[1].innerHTML;
		
		//獲取購物車表格的tbody
		var tbody = document.getElementById("goods");
		//新增一行
		var tr = tbody.insertRow();
		tr.innerHTML='<td>'+name+'</td>'+
		'<td>'+price+'</td>'+
		'<td align="center">'+
		'<input type="button" value="-" onclick="change(this,-1);">'+
		'<input type="text" value="1" size="3" readonly>'+
		'<input type="button" value="+" onclick="change(this,1);">'+
		'</td>'+
		'<td>'+price+'</td>'+
		'<td align="center">'+
		'<input type="button" value="X" onclick="del(this);">'+
		'</td>';
		total();
	}
	function del(btn) {
//自己不能刪除自己
//只有父節點才能刪除自己
		var tr = btn.parentNode.parentNode;
		tr.parentNode.removeChild(tr);
		total();
	}
	function change(btn,n) {
		var inputs = btn.parentNode.getElementsByTagName("input");
		var count = parseFloat(inputs[1].value);
		//當數量為1時不能點選減按鈕
		if (count <= 1&& n <0) {
			return;
		}
		inputs[1].value = count + n ;
		count = inputs[1].value;
		//獲取單價資訊
		var tr = btn.parentNode.parentNode;
		var tds = tr.getElementsByTagName("td");
		var price = tds[1].innerHTML;
		var sum = tds[2].innerHTML;
		tds[3].innerHTML = parseFloat(price*count);
		total();
	}
		function total() {
			var tbody = document.getElementById("goods");
			var trs = tbody.getElementsByTagName("tr");
			var sum = 0;
			for (var i = 0; i < trs.length; i++) {
				var tds = trs[i].getElementsByTagName("td");
				var td = tds[3].innerHTML;
				sum +=parseFloat(td);
			}
			var total = document.getElementById("total");
			total.innerHTML = sum;
		}
</script>
</head>
<body>
	<h1>聚划算</h1>
	<table>
		<thead>
			<tr>
				<th>商品名</th>
				<th>商品價格</th>
				<th>商品庫存</th>
				<th>好評率</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>龍瞎皮膚</td>
				<td>888</td>
				<td>100</td>
				<td>50%</td>
				<td>
					<input type="button" value="加入購物車" onclick="addshopping(this);"/>
				</td>
			</tr>
			<tr>
				<td>寒冰源計劃皮膚</td>
				<td>666</td>
				<td>50</td>
				<td>70%</td>
				<td>
					<input type="button" value="加入購物車" onclick="addshopping(this);"/>
				</td>
			</tr>
			<tr>
				<td>劫源計劃皮膚</td>
				<td>555</td>
				<td>30</td>
				<td>60%</td>
				<td>
					<input type="button" value="加入購物車" onclick="addshopping(this);"/>
				</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="5" style="text-align: center;color: red;">LOL皮膚選購</td>
			</tr>
		</tfoot>
	</table>
	<h1>購物車</h1>
	<table>
		<thead>
			<tr>
				<th>商品名</th>
				<th>商品單價</th>
				<th>商品數量</th>
				<th>商品總價</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="goods">
			
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">總價：</td>
				<td colspan="2" id="total"></td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

 

相關文章