html简单购物车代码
时间: 2023-12-24 15:00:30 浏览: 65
<html>
<head>
<title>简单购物车示例</title>
<script>
function addToCart(item) {
var cart = document.getElementById("cart");
cart.innerHTML += '<li>' + item + '</li>';
}
</script>
</head>
<body>
<h1>简单购物车示例</h1>
<h3>商品列表:</h3>
<ul>
<li>商品1 - ¥100 <button onclick="addToCart('商品1')">加入购物车</button></li>
<li>商品2 - ¥200 <button onclick="addToCart('商品2')">加入购物车</button></li>
<li>商品3 - ¥300 <button onclick="addToCart('商品3')">加入购物车</button></li>
</ul>
<h3>我的购物车:</h3>
<ul id="cart"></ul>
</body>
</html>
这是一个简单的HTML代码,实现了一个简单的购物车功能。在页面上有一个商品列表,每个商品后面都有一个“加入购物车”的按钮。每个按钮都绑定了一个addToCart的JavaScript函数,当点击按钮时,该商品将会被添加到购物车中。购物车是一个ul列表,当点击“加入购物车”按钮时,用JavaScript代码向购物车列表中动态添加了一个li项,显示了该商品的名称。通过这个简单的HTML代码,可以实现一个简单的购物车功能。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)