购物车逻辑
當我們添加購物車之后，我們可以點擊加減按鈕來實現商品數量的增加和減少，當商品數量變化的同時商品的總的價格也是在不停的變化的。
效果圖
完整代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script></head><body><p>商品數量: <span onclick="numDec()">-</span> <input type="text" id="quantity" value="1" /> <span onclick="numAdd()">+</span></p><p class="sdsd">商品價格: <span id="totalPrice">28.10</span></p><input type="hidden" value="28.1" id="price" /></body><script type="text/javascript">function keyup(){var quantity = document.getElementById("quantity").value;if(isNaN(quantity) || parseInt(quantity)!=quantity || parseInt(quantity)<1){quantity = 1;return;}if(quantity>=10){document.getElementById("quantity").value=quantity.substring(0,quantity.length-1);alert("商品數量不能大于10");}} function numAdd(){var quantity = document.getElementById("quantity").value;var num_add = parseInt(quantity)+1;var price=document.getElementById("price").value;if(quantity==""){num_add = 1;}if(num_add>=10){document.getElementById("quantity").value=num_add-1;alert("商品數量不能大于10");}else{document.getElementById("quantity").value=num_add;var Num=price*num_add;document.getElementById("totalPrice").innerHTML=Num.toFixed(2);}}/*商品數量-1*/function numDec(){var quantity = document.getElementById("quantity").value;var price=document.getElementById("price").value;var num_dec = parseInt(quantity)-1;if(num_dec>0){document.getElementById("quantity").value=num_dec;var Num=price*num_dec;document.getElementById("totalPrice").innerHTML=Num.toFixed(2);}}</script> </html>總結
- 上一篇： 简单的eda实验vga在linux系统中
- 下一篇： java值栈_Struts2 中的值栈是