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> background: url(img/file.png) no-repeat center 25px;<br> cursor: pointer;<br>}<br>.file input {<br> position: absolute;<br> left: 3px;<br> top: 3px;<br> display: none;<br>}<br>.fileName {<br> position: absolute;<br> left: 5px;<br> bottom: 10px;<br> width: 90px;<br> font: 12px/20px Arial,"宋体";<br> text-align: center;<br> white-space: nowrap;<br> overflow: hidden;<br> text-overflow: ellipsis;<br>}<br>.fileShow {<br> border: 1px solid #000;<br> background-color: #f1f1f1;<br>}<br>.fileShow input {<br> display: block;<br>}<br>.info {<br> position: fixed;<br> left: 0;<br> top: 0;<br> width: 100%;<br> height: 50px;<br> font: 30px/50px "宋体";<br> text-align: center;<br> transform: translateY(-50px);<br> background: #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 = '<input type="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; i < 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方法会时时和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 = "新建文件夹";<br/> var fileNameLast = "";<br/> var fileNames = wrap.querySelectorAll('.fileName');<br/> if(fileNames.length == 0){ //当前一个都还没有也就是创建第0个<br/> return fileName;<br/> }<br/> // 当中间可能删除了几个<br/> /*<br/> 由于中间会删除再添加，所以顺序会被打乱<br/> 把所有的名字存入数组，然后进行排序<br/> */<br/> var names = [];<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 != "新建文件夹"){<br/> return false;/*筛选掉不是已新建文件夹命名的*/<br/> }<br/> var lastName = val.substr(5);<br/> if(isNaN(lastName)){ /*筛选掉不是已新建文件夹跟随的不是数字的*/<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] != fileName){<br/> return fileName;<br/> }<br/> if(i>0 && names[i] != fileName+(i+1)){<br> return fileName+(i+1);<br> }<br> }<br> //当前顺序向后排列 name 就等于在当前的个数上+1<br> fileNameLast = names.length + 1;<br> fileName += fileNameLast;<br> return fileName;<br> }<br>}; <br>
