HTML求總價代碼
以下是一個使用HTML代碼來計算購物車中所有商品總價的實例:
首先,在HTML中創建一個表格來顯示購物車中的商品信息,并在每個項目的末尾添加一個輸入框,以便用戶可以輸入該商品的數量:
<table> <tr> <th>商品名稱</th> <th>價格</th> <th>數量</th> </tr> <tr> <td>商品1</td> <td id="price1">20</td> <td><input type="number" id="quantity1" onchange="calculateTotal()" value="1"></td> </tr> <tr> <td>商品2</td> <td id="price2">30</td> <td><input type="number" id="quantity2" onchange="calculateTotal()" value="1"></td> </tr> </table>接下來,創建一個函數來計算購物車中所有商品的總價,并將其顯示在頁面上:
<p>總價:<span id="total"></span></p> <script> function calculateTotal() { var price1 = document.getElementById("price1").innerText; var quantity1 = document.getElementById("quantity1").value; var price2 = document.getElementById("price2").innerText; var quantity2 = document.getElementById("quantity2").value; var total = parseInt(price1) * parseInt(quantity1) + parseInt(price2) * parseInt(quantity2); document.getElementById("total").innerText = total; } </script>在這個函數中,我們首先獲取每個商品的價格和數量,并計算它們的總價。然后,將總價顯示在頁面上的一個元素中,以便用戶可以清楚地看到購物車中所有商品的總價。 這就是使用HTML代碼來計算購物車中商品總價的方法。您可以將其應用于您的網站,以提高用戶體驗和交互性。
上一篇css 適配層
下一篇css3禁用啟用按鈕