使用JavaScript实现购物车加减功能

"这篇文档介绍的是如何使用JavaScript实现一个简单的购物车加减功能。通过HTML结构和JavaScript逻辑，用户可以增加或减少商品数量，并实时更新总价。以下是详细的知识点解析：" 1. HTML 结构： - 使用`<input type="text">`作为商品数量的显示框，设置ID为"text"，用于JavaScript操作。 - 创建两个`<button>`元素，分别表示增加和减少，设置ID为"plus"和"subtract"。 - 另外，添加一个`<input type="number">`元素（ID为"money"），用于显示总价，初始值设为0，不显示边框，左对齐。 2. CSS 样式： - 清除页面默认的`margin`和`padding`。 - 创建一个`.box`类，用于包裹整个购物车组件，设置红色边框、固定高度、宽度和居中对齐。 - 定义输入框样式，如宽度、文本居中等。 - 针对`#money`元素，去除边框并调整文字对齐方式。 - 使用`<ul>`和`<li>`创建无序列表，但不显示列表符号，每个`<li>`元素浮动并垂直居中。 3. JavaScript 逻辑： - 当页面加载完成后，获取到加、减按钮以及数量显示框和总价显示框的引用。 - 给加号按钮绑定点击事件，当点击时，将数量加1，更新`<input type="text">`的值，并根据新的数量乘以单价更新总价。 - 减号按钮也有点击事件，当点击时，如果数量大于0，则数量减1，同样更新数量和总价的显示。 4. 事件处理函数： - `plus.onclick`事件处理函数用于处理点击加号按钮的逻辑，通过`i++`增加商品数量，并更新输入框和总价显示。 - `subtract.onclick`事件处理函数处理点击减号按钮的逻辑，检查当前数量是否大于0，避免减至负数，然后更新数量和总价。 5. 总结： 这个简单的购物车功能展示了JavaScript在动态更新网页内容上的基本应用。通过监听DOM元素的事件，可以实现用户交互，进而改变页面的状态。这个例子是前端开发中常见的实践，对于理解和学习JavaScript基础以及网页动态效果的实现非常有帮助。