标题《js简易版购物车功能》和描述表明，本文旨在分享如何利用JavaScript创建一个简易的购物车功能。该功能主要基于HTML和JavaScript实现，利用了HTML的拖拽API以及DOM操作方法来完成购物车中商品的添加、数量统计和总价计算。
知识点一：页面结构设计
在文档的`<style>`标签内，定义了页面的基本样式。其中涉及了使用CSS选择器来设置页面元素的布局和外观。例如，购物车列表项`li`被设置为浮动布局（`float:left`），每个列表项的宽度固定为200px，并且拥有边框、外边距等样式。`#bus`是购物车主体容器，也使用了浮动布局，并有固定宽度和高度。`.box1`、`.box2`、`.box3`是购物车内部的子元素，分别用来展示商品数量、名称和价格。`#allMoney`用于显示购物车中的总价信息，并浮动到页面的右侧。
知识点二：JavaScript事件处理
文档中的JavaScript部分首先通过`window.onload`事件确保在页面完全加载后执行。这个事件处理函数中，首先获取了页面中购物车列表（`#list`）和购物车容器（`#bus`）的DOM元素，并初始化了一些用于后续操作的变量，例如`obj`用于统计加入购物车的商品数量，`iNum`和`allMoney`用于记录商品数量和总价。
知识点三：拖拽功能实现
通过`ondragstart`事件，将被拖拽元素的数据（包括商品标题和价格）存储在`dataTransfer`对象中，以备在后续的拖拽事件中使用。当商品被拖拽到购物车容器（`#bus`）上时，触发`ondragover`事件，此事件中调用`preventDefault`方法来阻止事件的默认行为，使得拖拽元素可以被成功地放入购物车。紧接着，`ondrop`事件被触发，通过`dataTransfer`对象获取之前存储的被拖拽元素的数据，进而添加到购物车容器中，并更新商品的数量统计和总价。
知识点四：DOM操作
在`ondrop`事件处理函数中，使用JavaScript的DOM操作方法来创建和添加新的元素。如果购物车中尚未存在该商品，则创建一个包含数量、名称和价格的新`<p>`标签，并将其添加到购物车容器中。如果商品已存在，则通过选择器找到相应数量的标签，将其中的数字加一来表示商品数量的增加。此外，还涉及到创建`<div>`元素并设置其ID为`allMoney`来显示总价信息。
知识点五：JavaScript基础语法
本文还涉及了JavaScript的基础语法，如变量声明、循环遍历（`for`循环）、条件判断（`if`语句）、数据类型转换（使用`parseInt`函数将价格转换为整数）等。这些是实现一个简易购物车所必须的基础知识。
知识点六：代码注释
代码中穿插的注释对于理解程序的逻辑流程至关重要，注释使用中文，对于初学者来说更容易理解代码的编写意图和功能。
通过以上的知识点描述，我们能够了解到实现一个简易购物车功能，需要掌握HTML页面结构设计、CSS样式布局、JavaScript事件处理机制、DOM操作技巧以及基础的JavaScript语法知识。这些知识是前端开发人员必须熟悉的基础技能，而本文提供了一个实用的示例来加深理解。
