Document<br>corps {<br> marge : 0;<br>} <br>en-tête {<br> border-bottom : 2px solid #000 ;<br> height : 40px;<br> line-height : 40px;<br> text-align : center;<br>}<br>.file {<br> marge : 20px;<br> float : gauche;<br> position : relative;<br> largeur : 100px;<br> hauteur : 110px;<br> border-radius : 5px;<br> border : 1px solid rgba (0, 0, 0, 0);<br> arrière-plan : url(img/file.png) centre sans répétition 25px ;<br> curseur : pointeur;<br>}<br>entrée .file {<br> position : absolue;<br> gauche : 3px;<br> haut : 3px;<br> affichage : aucun;<br>}<br>.fileName {<br> position : absolue;<br> gauche : 5px;<br> bas : 10px;<br> largeur: 90px;<br> police: 12px/20px Arial,"宋体";<br> text-align: center;<br> espace blanc: nowrap;<br> débordement : caché;<br> débordement de texte : points de suspension;<br>}<br>.fileShow {<br> bordure : 1px solide #000;<br> couleur d'arrière-plan : #f1f1f1;<br>}<br>.fileShow input {<br> affichage : bloc;<br>}<br>.info {<br> position : fixe;<br> gauche : 0;<br> haut : 0;<br> largeur : 100 % ;<br> hauteur : 50px;<br> police : 30px/50px "宋体";<br> text-align : center;<br> transformation : traduireY(-50px);<br> arrière-plan : #ccc;<br>}<br><br>fenêtre. 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 = '<type d'entrée ="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; je &Lt ; 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同步的而getget方法会时时和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 = "Nouveau dossier";<br/> var fileNameLast = "";<br/> var fileNames = wrap.querySelectorAll('.fileName'); 🎜> if(fileNames.length == 0){ //Il n'y a actuellement personne, ce qui signifie créer le 0ème <br/> return fileName;<br/> }<br/> // Plusieurs <🎜 ont peut-être été supprimés au milieu > /*<br/> Puisque les suppressions et les ajouts seront effectués au milieu, l'ordre sera perturbé <br/> Stockez tous les noms dans le tableau puis triez-les <br/> */<br/> var noms = []; <br/> for(var i = 0; i < fileNames.length; i++){<br/> names.push(fileNames[i].innerHTML);<br/> }<br/><br/> names = noms.filter (function( val){<br/> var startName = val.substr(0,5);<br/> if(startName != "New Folder"){<br/> return false;/*Filtrer les fichiers qui ne sont pas nommés après le dossier nouvellement créé */<br/> }<br/> var lastName = val.substr(5);<br/> if(isNaN(lastName)){ /*Filtrer ceux qui ne sont pas des numéros suivant le dossier nouvellement créé* /<br/> return false;<br/> }<br/> return true;<br/> });<br/> names.sort(function(a,b){<br/> return a.substr(5) - b. substr(5); <br/> });<br/> console.log(names);<br/> for(var i = 0; i <names.length; i++){<br/> if(names[0] != nomfichier){ <br/> return nomfichier;<br/> }<br/> if(i>0 && noms[i] != nomfichier+(i+1)){<br> return nomfichier+(i+1);<br> }<br> }<br> //Arranger les noms en arrière dans l'ordre actuel équivaut à +1 sur le numéro actuel<br> fileNameLast = noms.longueur + 1;<br> fileName += fileNameLast;<br> return fileName;<br> }<br>}; <br>< /div>
