Document<br>body {<br> margin: 0;<br>} <br>header {<br> border-bottom: 2px solid #000;<br> height: 40px;<br> line-height: 40px;<br> text-align: center;<br>}<br>.file {<br> margin: 20px;<br> float: left;<br> position: relative;<br> width: 100px;<br> height: 110px;<br> border-radius: 5px;<br> border: 1px solid rgba (0, 0, 0, 0);<br> Hintergrund: URL(img/file.png) keine Wiederholung, Mitte 25 Pixel;<br> Cursor: Zeiger;<br>}<br>.Dateieingabe {<br> Position: absolut;<br> links: 3px;<br> oben: 3px;<br> Anzeige: keine;<br>}<br>.fileName {<br> Position: absolut;<br> links: 5px;<br>unten: 10px;<br>Breite: 90px;<br>Schriftart: 12px/20px Arial,"宋体";<br>text-align: center;<br>white-space: nowrap;<br>overflow: versteckt;<br> text-overflow: ellipsis;<br>}<br>.fileShow {<br> border: 1px solid #000;<br> background-color: #f1f1f1;<br>}<br>.fileShow Eingabe {<br>Anzeige: Block;<br>}<br>.info {<br>Position: fest;<br>links: 0;<br>oben: 0;<br>Breite: 100%;<br> Höhe: 50px;<br> Schriftart: 30px/50px "宋体";<br> Textausrichtung: Mitte;<br> Transformation: TranslateY(-50px);<br> Hintergrund: #ccc;<br>}<br><br>window. onload = function(){<br> var creat = document.querySelector('.creat');<br> var del = document.querySelector('.del');<br> var wrap = document.querySelector('. wrap');<br> var info = document.querySelector('.info');<br> var timer = 0;<br> creat.onclick = function(){<br> /* 创建元素，并添加事件*/<br> var file = document.createElement('div');<br> var fileName = getFileName();<br> file.className = "file";<br> file.innerHTML = '<Eingabetyp ="checkbox" name=""><span class="fileName" contenteditable>'+fileName+'</span>';<br> var check = file.querySelector('input[type = "checkbox"] ');<br> var fileName = file.querySelector('.fileName');<br> file.onmouseover = function(){<br> this.className = "file fileShow";<br> };<br> file.onmouseout= function(){<br> if(!check.checked){<br> this.className = "file";<br> }<br> };<br> fileName.onblur = function(){ <br> if(this.innerHTML.trim() == ""){<br> info.innerHTML = "请输入文件夹名字";<br> info.style.transform = "translateY(0)";<br> this.focus();<br> clearTimeout(timer);<br> timer=setTimeout(function(){<br> info.style.transform = "translateY(-50px)";<br> },2000 );<br> return;<br> }<br> var fileNames = document.querySelectorAll('.fileName');<br> for(var i = 0; ich < fileNames.length; i++){<br/> if(this != fileNames[i]&&this.innerHTML == fileNames[i].innerHTML){<br/> info.innerHTML = "文件夹名字重名了，请重新输入";<br/> info.style.transform = "translateY(0)";<br/> this.focus();<br/> clearTimeout(timer);<br/> timer=setTimeout(function(){<br/> info.style.transform = "translateY(-50px)";<br/> },2000);<br/> }<br/> }<br/> };<br/> /*onkeydown 键盘按下 */<br/> fileName.onkeydown = function( ){<br/> if(this.innerHTML == "请输入名字"){<br/> this.innerHTML = "";<br/> }<br/> }<br/> wrap.appendChild(file);<br/> };<br/> del.onclick = function(){<br/> /* 删除选中的元素 */<br/> var fileName = wrap.querySelectorAll('input:checked+.fileName');<br/> var input = wrap .getElementsByTagName("input")<br/> /* query时和dom同步, dom改了get获取到的数据也会自定修改 */<br/> //console.log(fileName,input);<br/> for(var i = 0; i < fileName.length; i++){<br/> wrap.removeChild(fileName [i].parentNode);<br/> }<br/> console.log(fileName);<br/> };<br/> // 获取文件夹名字<br/> /* <br/> 创建文件夹名字并进行排序<br/> 0 新建文件夹<br/> 1 新建文件夹2<br/> 2 新建文件夹3 </p><p> 第一种情况：正常排序<br/></p><p> */<br/> function getFileName(){<br/> var fileName = "Neuer Ordner";<br/> var fileNameLast = "";<br/> var fileNames = wrap.querySelectorAll('.fileName'); <br/> if(fileNames.length == 0){ //Es gibt derzeit niemanden, was bedeutet, dass der 0. <br/> return fileName erstellt wird;<br/> }<br/> // Mehrere <🎜 wurden möglicherweise in der Mitte gelöscht > /*<br/> Da Löschungen und Hinzufügungen in der Mitte vorgenommen werden, wird die Reihenfolge gestört <br/> Alle Namen im Array speichern und dann sortieren <br/> */<br/> var name = []; <br/> for(var i = 0; i < fileNames.length; i++){<br/> Names.push(FileNames[i].innerHTML);<br/> }<br/><br/> Names = Names.filter (function( val){<br/> var startName = val.substr(0,5);<br/> if(startName != "New Folder"){<br/> return false;/*Dateien herausfiltern, die nicht benannt sind nach dem neu erstellten Ordner */<br/> }<br/> var lastName = val.substr(5);<br/> if(isNaN(lastName)){ /*Filtern Sie diejenigen heraus, die keine Zahlen sind, die dem neu erstellten Ordner folgen* /<br/> return false;<br/> }<br/> return true;<br/> });<br/> name.sort(function(a,b){<br/> return a.substr(5) - b. substr(5); <br/> });<br/> console.log(names);<br/> for(var i = 0; i < name.length; i++){<br/> if(names[0] != fileName){ <br/> return fileName;<br/> }<br/> if(i>0 && Names[i] != fileName+(i+1)){<br> return fileName+(i+1); }<br>}; <br>< /div>
