HTML+CSS+JavaScript实现在线网盘

1 页面布局

页面包括“新建文件夹”按钮、“全选”复选框，新建文件夹的容器和新建文件夹。HTML代码示例如下，CSS代码详见本书源码。

1 <button  id="createBtn">新建文件夹</button>
2 <input type="checkbox"  id="checkedAll"> 全选
3 <div id="box">
4   <!-- <div class="file fileActive">
5	      <img src="img/folder-b.png">
6	      <span>新建文件夹</span>
7	      <i class="checked"></i>
8       </div> -->
9 </div>

上述代码中，第1行代码代表“新建文件夹”按钮；第2行代码代表“全选”复选框；第3行代码代表“新建文件夹”的容器；第4-8行代码代表新建文件夹的HTML代码结构。由于新建文件夹是动态创建的，因此将第4-8行代码注释掉。其中，第5行代码代表新建文件夹的图片；第6行代码代表新建文件夹的名称；第7行代码代表新建文件夹左上角的复选框。

2 新建文件夹

由页面布局可知，单击“新建文件夹”按钮可以创建文件夹，因此为“新建文件夹”按钮绑定单击事件及其处理程序，示例代码如下。

1 var createBtn = document.querySelector('#createBtn');
2 var checkedA