JavaScript小测验3
利用JavaScript Object重新设计购物车系统
答案
<!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="
result.product1=0;
result.product2=0;
result.total=0;
result.productNum=0;
">清空購物車</button>
<img src="product_images/product_image1.jpg">
<p>$100</p>
<button onclick="
price('product1',100);
">加入購物車</button>
<img src="product_images/product_image2.jpg">
<p>$200</p>
<button onclick="
price('product2',200);
">加入購物車</button>
<script>
function price(product,price){
result.product+=price;
result.productNum+=1;
result.total+=price;
console.log(`产品总数量${result.productNum}`);
console.log(`产品总数量${result.total}`);
}
let result ={
productNum:0,
product1:0,
product2:0,
total:0,
}
</script>
</body>
</html>
