JS實現購物車02

時間 2019-12-11

原文原文鏈接

需求
使用JS實現購物車功能02javascript

具體代碼html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車02</title>
</head>
<body>
<table align="center" border="2" id = "shop">
<tr>
<th colspan="4" align="center">商品列表<input id="add" type="button" value="一鍵上架"></th>
</tr>
<tr>
<th>商品序號</th>
<th>商品名稱</th>
<th>出售價格</th>
<th>操做</th>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<table align="center" border="2" id = "cart">
<tr>
<th colspan="4" align="center">購物車<input id="clear" type="button" value="一鍵清空"></th>
</tr>
<tr>
<th>商品名稱</th>
<th>商品價格</th>
<th>商品數量</th>
<th>操做</th>
</tr>
</table>


<h3 id="total" align="center">總價: ￥0.0</h3>


<script type="text/javascript">
var goods_name = ["阿爾卑斯棒棒糖","耳機","北京糖葫蘆","智能掃地機器人"];
var goods_price = ["1.5","30","5","258"];
//一鍵上架
var add = document.getElementById("add");
add.onclick = function(){
var shop =  document.getElementById("shop");
for(var i = 0; i< goods_name.length;i++){
var row = shop.insertRow();
row.insertCell().innerHTML = i + 1;
row.insertCell().innerHTML = goods_name[i];
row.insertCell().innerHTML = "￥" + goods_price[i];
row.insertCell().innerHTML = "<button id='" + i + "' onclick='addCart(this);'>加入購物車</button>";
}
this.setAttribute("disabled", true);
}


var cartData = {


}


var index = 0;
//準備加入購物車的數據
function addCart(btn) {


var gname = goods_name[btn.id];
var gobj = cartData[gname];

if(!gobj){//沒有數據
//新增一條數據
cartData[goods_name[btn.id]] = {
id:btn.id,
count:1,
index:index++
}
}else{
cartData[goods_name[btn.id]].count++;
}
//console.log(cartData);
showCart(cartData);
}
//加入購物車
function showCart(obj){
clearCart();
getTotal(obj);
var cart = document.getElementById("cart");
for(var k in obj){
var row = cart.insertRow();
row.insertCell().innerHTML = k;
row.insertCell().innerHTML = "￥" + goods_price[obj[k].id];
row.insertCell().innerHTML = obj[k].count;
row.insertCell().innerHTML = "<button id='" + k + "' onclick='deleteRow(this);'>刪除</button>";
}
}
//清空購物車
var clear = document.getElementById("clear");
clear.onclick = function(){
clearCart();
cartData = {};
}
//清空購物車的方法
function clearCart(){
var cart = document.getElementById("cart");
var rows = cart.rows;
for(var i = rows.length - 1 ; i > 1 ; i--){
cart.deleteRow(i);
}
total = 0.0;
//更新總價
document.getElementById("total").innerHTML = "總價:￥" + total;
}


var total = 0.0;
//獲得總價
function getTotal(obj){

for(var k in obj){
var subTotal = goods_price[obj[k].id] * obj[k].count;
total += subTotal;
}
//更新總價
document.getElementById("total").innerHTML = "總價:￥" + total;


}


//刪除整行
function deleteRow(btn){
var cart = document.getElementById("cart");
var rowIndex = btn.parentNode.parentNode.rowIndex;
cart.deleteRow(rowIndex);
delete cartData[btn.id];
total = 0.0;
getTotal(cartData);
} 


</script>
</body>
</html>

效果圖
樣式比較醜，不要介意哈java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。