如何创建一个有“添加产品”按钮和一个空按钮的购物清单

要创建一个包含“添加产品”按钮和一个空按钮的购物清单，你可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物清单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="shopping-list">
        <h1>购物清单</h1>
        <ul id="itemList">
            <!-- 产品列表将动态添加到这里 -->
        </ul>
        <input type="text" id="itemInput" placeholder="输入产品名称">
        <button id="addItem">添加产品</button>
        <button id="clearList">清空清单</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
    font-family: Arial, sans-serif;
}

.shopping-list {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 5px 0;
    padding: 5px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

button {
    margin-top: 10px;
}

JavaScript部分（script.js）

document.getElementById('addItem').addEventListener('click', function() {
    const input = document.getElementById('itemInput');
    const itemList = document.getElementById('itemList');
    const newItem = document.createElement('li');
    newItem.textContent = input.value;
    itemList.appendChild(newItem);
    input.value = ''; // 清空输入框
});

document.getElementById('clearList').addEventListener('click', function() {
    const itemList = document.getElementById('itemList');
    itemList.innerHTML = ''; // 清空列表
});

解释

HTML部分：定义了页面的基本结构，包括一个标题、一个无序列表用于显示产品、一个输入框和一个“添加产品”按钮以及一个“清空清单”按钮。
CSS部分：提供了基本的样式，使页面看起来更整洁。
JavaScript部分：
- 当点击“添加产品”按钮时，会从输入框获取文本，创建一个新的列表项，并将其添加到列表中。
- 当点击“清空清单”按钮时，会移除列表中的所有项。