JS 小demo之新建資料夾的實例教學-js教程-PHP中文網

文件 body { 邊距：0; } header { 邊框底部： 2 像素實線#000; 高度：40 像素； 行高：40 像素； 文字對齊：居中； } .file { 邊距: 20px; 浮動: 左; 位置: 相對; 寬度: 100px; 高度: 110px; 邊框半徑: 5px; 邊框: 1px 實心rgba (0, 0, 0 , 0); 背景：url(img/file.png)不重複中心25px; 遊標：指標; } .檔案輸入{ 位置：絕對; 左：3 像素； 頂部：3 像素； 顯示：無; } .fileName { 位置：絕對; 左：5 像素； 底部: 10px; 寬度: 90px; 字體: 12px/20px Arial,"宋體"; 文字對齊: 居中; 空白: nowrap; 溢出:隱藏; 文字溢出: 省略號; } .fileShow { 邊框: 1px 實線#000; 背景顏色: #f1f1f1; } .fileShow輸入{ 顯示：區塊; } .info { 位置：固定； 左：0; 頂部：0; 寬度：100%; 高度: 50px; 字體: 30px/50px "宋體"; 文字對齊: center; 變換:translateY(-50px); 背景: #ccc; } contenteditable 讓內容可以編輯 --> window. onload = function(){ var creat = document.querySelector('.creat'); var del = document.querySelector('.del'); var wrap = document.querySelector('. wrap'); var info = document.querySelector('.info'); var time = 0; creat.onclick = function(){ /* 建立元素，並新增事件*/ var file = document .createElement('div'); var fileName = getFileName(); file.className = "file"; file.innerHTML = ' '+fileName+''; 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;我 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") /* 查詢方法只獲取一次，dom修改瞭如果不重新獲取，是不會和dom同步的，而get方法會時時和dom同步，dom修改了get獲取到的數據也自訂修改*/ //console.log(fileName,input); for(var i = 0; 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 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 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; } }; 新資料夾新資料夾 -->

相關文章