首页点击一个页面的加入购物车，商品（包括图片，单价，数量）会成功加入到另一个页面的购物车中，写出两个页面HTML的详细代码。

点击一个页面的加入购物车，商品（包括图片，单价，数量）会成功加入到另一个页面的购物车中，写出两个页面HTML的详细代码。

时间: 2024-03-10 13:48:18 浏览: 233

页面1（商品详情页面）HTML代码： ``` <!DOCTYPE html> <html> <head> <title>商品详情</title> </head> <body> <h1>商品详情</h1> <img src="商品图片.jpg" alt="商品图片"> <p>单价：$10</p> <label for="quantity">数量：</label> <input type="number" id="quantity" name="quantity" min="1" value="1"> <button onclick="addToCart()">加入购物车</button> <script> function addToCart() { var quantity = document.getElementById("quantity").value; var cartItem = { image: "商品图片.jpg", price: 10, quantity: quantity }; localStorage.setItem("cartItem", JSON.stringify(cartItem)); alert("商品已成功加入购物车！"); } </script> </body> </html> ``` 页面2（购物车页面）HTML代码： ``` <!DOCTYPE html> <html> <head> <title>购物车</title> </head> <body> <h1>购物车</h1> <table> <thead> <tr> <th>商品图片</th> <th>单价</th> <th>数量</th> </tr> </thead> <tbody> <tr> <td><img src="" alt="商品图片"></td> <td>$<span id="price"></span></td> <td><span id="quantity"></span></td> </tr> </tbody> </table> <script> var cartItem = JSON.parse(localStorage.getItem("cartItem")); document.querySelector("img").src = cartItem.image; document.getElementById("price").textContent = cartItem.price; document.getElementById("quantity").textContent = cartItem.quantity; </script> </body> </html> ``` 注：以上代码只是示例，实际开发中，应该根据需要进行修改和完善。

阅读全文