文件<br/>body {<br/> 邊距：0;<br/>} <br/>header {<br/> 邊框底部： 2 像素實線#000;<br/> 高度：40 像素；<br/> 行高：40 像素；<br/> 文字對齊：居中；<br/>}<br/>.file {<br/> 邊距: 20px; <br/> 浮動: 左;<br/> 位置: 相對;<br/> 寬度: 100px;<br/> 高度: 110px;<br/> 邊框半徑: 5px;<br/> 邊框: 1px 實心rgba (0, 0, 0 , 0);<br/>背景：url(img/file.png)不重複中心25px;<br/>遊標：指標;<br/>}<br/>.檔案輸入{<br/>位置：絕對;<br/>左：3 像素；<br/> 頂部：3 像素；<br/> 顯示：無;<br/>}<br/>.fileName {<br/> 位置：絕對;<br/> 左：5 像素；<br/> 底部: 10px;<br/> 寬度: 90px;<br/> 字體: 12px/20px Arial,"宋體";<br/> 文字對齊: 居中;<br/> 空白: nowrap;<br/> 溢出:隱藏;<br/> 文字溢出: 省略號;<br/>}<br/>.fileShow {<br/> 邊框: 1px 實線#000;<br/> 背景顏色: #f1f1f1;<br/>}<br/>.fileShow輸入{<br/> 顯示：區塊;<br/>}<br/>.info {<br/> 位置：固定；<br/> 左：0;<br/> 頂部：0;<br/> 寬度：100%;<br/> 高度: 50px;<br/>字體: 30px/50px "宋體";<br/> 文字對齊: center;<br/> 變換:translateY(-50px);<br/> 背景: #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 time = 0;<br/> creat.onclick = function(){<br/> /* 建立元素，並新增事件*/<br/> var file = document .createElement('div');<br/> var fileName = getFileName();<br/> file.className = "file";<br/> file.innerHTML = '<輸入類型="checkbox" name="">< span class="fileName" contenteditable>'+fileName+'';<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++){<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/> /* 查詢方法只獲取一次，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># 第一種情況：正常排序<br/><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/>
