JavaScript小测验7
将购物车系统显示在页面上而不是console中
<!DOCTYPE html>
<html>
<head>
<title>測驗</title>
<style>
button{
font-size:25px;
margin-right:10px;
}
p{
font-size: 25px;
display: inline-block;
margin-right:10px;
}
img{
height: 200px;
display: block;
margin-top:50px;
}
</style>
</head>
<body>
<button onclick="
showCart();
local123();
">購物車總額</button>
<button onclick="
cart.productNum = 0;
cart.prodcut1.num = 0;
cart.prodcut2.num = 0;
cart.totalPrice = 0;
console.log('已清空購物車');
showCart();
local123();
">清空購物車</button>
<img src="product_images/product_image1.jpg">
<p>$100</p>
<button onclick="
cart.productNum++;
cart.prodcut1.num++;
cart.totalPrice += 100;
showCart();
local123();
">加入購物車</button>
<img src="product_images/product_image2.jpg">
<p>$200</p>
<button onclick="
cart.productNum++;
cart.prodcut2.num++;
cart.totalPrice += 200;
showCart();
local123();
">加入購物車</button>
<h1>目前商品數:<p id="totalnum">0</p></h1>
<h1 class="num1"></h21>
<h1 id="num2"></h1>
<h1>总价:<p class="total">0</p></h1>
<script>
let cart1 = localStorage.getItem("plus");
let cart = JSON.parse(cart1);
if (cart===null) {
cart = {
productNum: 0,
prodcut1: {
num: 0,
name: "海底撈泡麵",
price: 100
},
prodcut2: {
num: 0,
name: "養氣人蔘",
price: 200
},
totalPrice: 0
};
};
showCart();
function local123(){
localStorage.setItem("plus",JSON.stringify(cart));
};
function showCart() {
let a=document.querySelector("#totalnum");
let b=document.querySelector(".num1");
let c=document.querySelector("#num2");
let d=document.querySelector(".total");
a.innerHTML=`${cart.productNum}`;
b.innerHTML=`${cart.prodcut1.name} : ${cart.prodcut1.num}`;
c.innerHTML=`${cart.prodcut2.name} : ${cart.prodcut2.num}`;
d.innerHTML=`${cart.totalPrice}`;
}
</script>
</body>
</html>
