每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>document</title><style type="text/css">body {margin: 0;} header {border-bottom: 2px solid #000;height: 40px;line-height: 40px;text-align: center;}.file {margin: 20px;float: left;position: relative;width: 100px;height: 110px;border-radius: 5px;border: 1px solid rgba(0, 0, 0, 0);background: url(img/file.png) no-repeat center 25px;cursor: pointer;}.file input {position: absolute;left: 3px;top: 3px;display: none;}.fileName {position: absolute;left: 5px;bottom: 10px;width: 90px;font: 12px/20px Arial,"宋体";text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.fileShow {border: 1px solid #000;background-color: #f1f1f1;}.fileShow input {display: block;}.info {position: fixed;left: 0;top: 0;width: 100%;height: 50px;font: 30px/50px "宋体";text-align: center;transform: translateY(-50px);background: #ccc;}</style><!--contenteditable 使内容可以编辑--><script type="text/javascript">window.onload = function(){var creat = document.querySelector('.creat');var del = document.querySelector('.del');var wrap = document.querySelector('.wrap');var info = document.querySelector('.info');var timer = 0;creat.onclick = function(){var file = document.createElement('div');var fileName = getFileName();file.className = "file";file.innerHTML = '<input type="checkbox" name=""><span class="fileName" contenteditable>'+fileName+'</span>';var check = file.querySelector('input[type = "checkbox"]');var fileName = file.querySelector('.fileName');file.onmouseover = function(){this.className = "file fileShow";};file.onmouseout= function(){if(!check.checked){this.className = "file";}};fileName.onblur = function(){if(this.innerHTML.trim() == ""){info.innerHTML = "请输入文件夹名字";info.style.transform = "translateY(0)";this.focus();clearTimeout(timer);timer=setTimeout(function(){info.style.transform = "translateY(-50px)";},2000);return;}var fileNames = document.querySelectorAll('.fileName');for(var i = 0; i < fileNames.length; i++){if(this != fileNames[i]&&this.innerHTML == fileNames[i].innerHTML){info.innerHTML = "文件夹名字重名了，请重新输入";info.style.transform = "translateY(0)";this.focus();clearTimeout(timer);timer=setTimeout(function(){info.style.transform = "translateY(-50px)";},2000);}}};fileName.onkeydown = function(){if(this.innerHTML == "请输入名字"){this.innerHTML = "";}}wrap.appendChild(file);};del.onclick = function(){var fileName = wrap.querySelectorAll('input:checked+.fileName');var input = wrap.getElementsByTagName("input")//console.log(fileName,input);for(var i = 0; i < fileName.length; i++){wrap.removeChild(fileName[i].parentNode);}console.log(fileName);};// 获取文件夹名字function getFileName(){var fileName = "新建文件夹";var fileNameLast = "";var fileNames = wrap.querySelectorAll('.fileName');if(fileNames.length == 0){ //当前一个都还没有也就是创建第0个return fileName;}// 当中间可能删除了几个var names = [];for(var i = 0; i < fileNames.length; i++){names.push(fileNames[i].innerHTML);}names = names.filter(function(val){var startName = val.substr(0,5);if(startName != "新建文件夹"){return false;}var lastName = val.substr(5);if(isNaN(lastName)){ return false;}return true;});names.sort(function(a,b){return a.substr(5) - b.substr(5); });console.log(names);for(var i = 0; i < names.length; i++){if(names[0] != fileName){return fileName;}if(i>0 && names[i] != fileName+(i+1)){return fileName+(i+1);}}//当前顺序向后排列 name 就等于在当前的个数上+1fileNameLast = names.length + 1;fileName += fileNameLast;return fileName;}}; </script></head><body><div class="info"></div><header><input type="button" value="新建文件夹" class="creat" /><input type="button" value="删除文件夹" class="del" /></header><div class="wrap"><!-- <div class="file fileShow"><input type="checkbox" name=""><span class="fileName">新建文件夹新建文件夹</span></div> --></div> </body></html>
