首页html制作简易购物栏，包含数量，单价，运费，合计计算

html制作简易购物栏，包含数量，单价，运费，合计计算

时间: 2024-10-16 12:05:40 浏览: 35

HTML可以配合JavaScript来制作一个简单的购物车，其中包含商品的数量、单价、运费以及总价的计算。下面是一个基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简易购物栏</title> </head> <body> <div id="shoppingCart"> <h2>购物车</h2>  <ul> <li> <input type="number" id="itemQuantity" name="itemQuantity" min="1"> 件 <span id="itemPrice">50元/件</span> <span id="shippingCost">10元/单</span> <button onclick="calculateTotal()">加入购物车</button> <p id="totalCost"></p> </li> </ul> <hr> <h3>总金额:</h3> <span id="grandTotal">总计:</span> </div> <script> function calculateTotal() { const quantity = document.getElementById('itemQuantity').value; const price = parseFloat(document.getElementById('itemPrice').textContent.replace('元/件', '')); const shipping = parseFloat(document.getElementById('shippingCost').textContent.replace('元/单', '')); let subtotal = quantity * price; let total = subtotal + shipping; document.getElementById('totalCost').innerText = `总价: ${subtotal} 元`; document.getElementById('grandTotal').innerText = `总计: ${total} 元`; } </script> </body> </html> ``` 在这个例子中，用户可以输入商品数量并点击按钮触发`calculateTotal`函数，这个函数会获取数量、单价和运费，然后分别计算出总价，并显示在页面上。

阅读全文