首页按照例子编写一个HTML页面1.1.html,计算购物车商品总价。

按照例子编写一个HTML页面1.1.html,计算购物车商品总价。

时间: 2024-09-30 12:16:37 浏览: 36

当你创建一个简单的HTML页面用于计算购物车商品总价，你可以使用基本的HTML结构，并结合一些JavaScript来实现动态计算功能。这里是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>购物车计算</title> </head> <body> <h1>购物车商品总价计算器</h1>  <div id="cartItems"> <ul>  <li data-price="99" class="item">商品A, 单价: <span class="price"></span></li> <li data-price="50" class="item">商品B, 单价: <span class="price"></span></li> </ul> </div>  <p id="totalPrice">总价: <span id="total">0</span>元</p> <script> // 获取商品列表并计算总价格 function calculateTotal() { let totalPrice = 0; const items = document.querySelectorAll('.item .price'); items.forEach(item => { const price = parseInt(item.textContent); totalPrice += price; }); document.getElementById('total').textContent = totalPrice; } // 初始化总价 calculateTotal(); // 当添加新商品时，自动更新总价 document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.item').forEach(item => { item.addEventListener('click', () => { calculateTotal(); }); }); }); </script> </body> </html> ``` 在这个例子中，我们首先定义了商品列表和总价显示区域。然后，通过JavaScript获取每个商品的价格，并累加到总价上。当用户点击添加到购物车的商品时，会触发`calculateTotal`函数，实时更新总价。

阅读全文