JS实现新建文件夹功能
网络 2017-06-21 1286
主要知识点：DOM方法的综合运用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 | <!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); } } }; /*onkeydown 键盘按下 */ 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") /* query方法只获取一次，dom修改了如果不重新获取，它是不会和dom同步的而get方法会时时和dom同步，dom改了get获取到的数据也会自定修改 */ //console.log(fileName,input); for(var i = 0; i < fileName.length; i++){ wrap.removeChild(fileName[i].parentNode); } console.log(fileName); }; // 获取文件夹名字 /* 创建文件夹名字并进行排序 0 新建文件夹 1 新建文件夹2 2 新建文件夹3 第一种情况：正常排序 */ 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 就等于在当前的个数上+1 fileNameLast = 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> |
以上就是本文的全部内容，希望对大家的学习有所帮助
