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 checkedAll = document.querySelector('#checkedAll');3 var box = document.querySelector('#box');4 createBtn.onclick = function(){5 var file = document.createElement("div");6 file.className = "file";7 file.innerHTML = '<img src="img/folder.png"><span>新建文件夹</span><i></i>';8 box.appendChild(file);9 checkedAll.checked = false;10 };
上述代码中，第1行代码获取页面中的“新建文件夹”按钮；第2行代码获取页面中的“全选”复选框；第3行代码获取新创建的文件夹的容器；第4行代码为按钮绑定单击事件及其处理程序；根据文件夹的HTML代码结构，第5行代码创建1个div元素，将它的class属性值设置为“file”，innerHTML属性设置为“<img src="img/folder.png"><span>新建文件夹</span><i></i>”，然后添加至容器box中；由于新建文件夹默认没有选中，因此第9行代码将“全选”复选框设置为不选中状态。
3 文件夹操作
文件夹操作，包括鼠标进入文件夹和鼠标离开文件夹。当鼠标进入文件夹时，改变当前文件夹的背景色和边框颜色，并让文件夹左上角的复选框显示；当鼠标离开文件夹时，如果左上角的复选框没有选中，则将当前文件夹的背景色和边框颜色还原，并隐藏文件夹左上角的复选框。
改变当前文件夹的背景色和边框颜色，并让文件夹左上角的复选框显示或隐藏，可以使用CSS中定义的“fileActive”类。CSS示例代码如下。
.fileActive {border-color: #000;//边框颜色background: #fff;//背景色}.fileActive i {display: block; //文件夹左上角的复选框显示}
鼠标进入文件夹和离开文件夹会触发当前文件夹的onmouseover和onmouseout事件，由于文件夹比较多，如果为每一个文件夹绑定事件，比较消耗资源，因此可以通过事件委托为所有文件夹的父元素“<div id="box">”绑定onmouseover和onmouseout事件及其处理程序。示例代码如下。
1 box.addEventListener('mouseover', function(e) {2var file = null;3if(e.target.classList.contains("file")){4file =e.target;5} else if(e.target.parentNode.classList.contains("file")){6file =e.target.parentNode;7} 8if(file){9file.classList.add("fileActive");10}11 });12 box.addEventListener('mouseout', function(e) {13var file = null;14if(e.target.classList.contains("file")){15file =e.target;16} else if(e.target.parentNode.classList.contains("file")){17file =e.target.parentNode;18} 19if(file){20var checked = file.querySelector('i');21if(!checked.classList.contains("checked")){22file.classList.remove("fileActive")23}24}25 });
上述代码中，第1行代码为box绑定了onmouseover事件及其处理程序；第3-7行代码判断触发onmouseover事件的事件源是否是文件夹或文件夹的子元素，若是，则将代表文件夹的对象赋值给变量file，否则file的值设置为null；第8-10行代码判断file的值，如果为真，则将file代表的文件夹对象添加“fileActive”类的样式；第12行代码为box绑定
onmouseout事件及其处理程序；第13-19行代码和onmouseover事件中一样；第20-23行代码判断文件夹左上角的复选框状态，如果没有选中，则删除“fileActive”类的样式。
4 全选功能
（1）单击“全选”复选框，使所有文件夹的选中状态和“全选”复选框的选中状态保持一致。示例代码如下。
1 var checkedAll = document.querySelector('#checkedAll');2 checkedAll.onchange = function(){3var files = document.querySelectorAll('.file');4files.forEach(function(item){5 var checked = item.querySelector('i');6if(checkedAll.checked){7item.classList.add("fileActive");8checked.classList.add("checked");9} else {10item.classList.remove("fileActive");11checked.classList.remove("checked");12}13});14 };
上述代码中，第2 行代码为“全选”复选框绑定状态改变事件及其处理程序；第4-13行代码遍历所有文件夹，如果选中“全选”复选框，则为所有文件夹的样式添加“fileActive”类，并选中所有文件夹左上角的复选框；否则，所有文件夹的样式删除“fileActive”类，并取消选中所有文件夹左上角的复选框。
（2）单击文件夹左上角的复选框，如果所有文件夹左上角的复选框都处于选中状态，则“全选”复选框设置为“选中”状态；否则，设置为“未选中”状态。由于文件夹左上角的复选框比较多，如果为每一个文件夹左上角的复选框绑定单击事件，比较消耗资源，因此可以通过事件委托为所有文件夹左上角的复选框的父元素“<div id="box">”绑定单击事件。示例代码如下。
1 box.addEventListener('click', function(e) {2if(e.target.tagName == "i"){3e.target.classList.toggle("checked");4setCheckedAll();// 设置“全选”复选框状态5}6 });7 function setCheckedAll(){8var filesChecked = document.querySelectorAll('.file>i');9for(var i = 0; i < filesChecked.length; i++){10if(!filesChecked[i].classList.contains("checked")){11checkedAll.checked = false;12return ;13}14}15checkedAll.checked = true;16 }
上述代码中，第1行代码为所有文件夹左上角的复选框的父元素绑定单击事件及其处理程序；第3行代码添加或删除当前复选框样式的“checked”类；第4行代码调用函数setCheckedAll()设置“全选”复选框状态；第7-16行代码定义函数setCheckedAll()，它用于设置“全选”复选框的状态。
视频讲解：HTML+CSS+JavaScript实现在线网盘网页特效_哔哩哔哩_bilibili
源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》
