使用js在頁面上新建資料夾
阿新 • • 發佈：2018-11-30
使用js在頁面上新建資料夾
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { margin: 0; } header { border-bottom: 2px solid #000; height: 40px; line-height: 40px; text-align: center; } .file { margin: 20px; float: left; position: relative; width: 100px; height: 110px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0); background: url(img/file.png) no-repeat center 25px; cursor: pointer; } .file input { position: absolute; left: 3px; top: 3px; display: none; } .fileName { position: absolute; left: 5px; bottom: 10px; width: 90px; font: 12px/20px Arial, "宋體"; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fileShow { border: 1px solid #000; background-color: #f1f1f1; } .fileShow input { display: block; } .info { position: fixed; left: 0; top: 0; width: 100%; height: 50px; font: 30px/50px "宋體"; text-align: center; transform: translateY(-50px); background: #ccc; } </style> <!-- contenteditable 使內容可以編輯 --> <script type="text/javascript"> window.onload = function() { var creat = document.querySelector('.creat'); var del = document.querySelector('.del'); var wrap = document.querySelector('.wrap'); var info = document.querySelector('.info'); var timer = 0; creat.onclick = function() { /* 建立元素，並新增事件 */ var file = document.createElement('div'); var fileName = getFileName(); file.className = "file"; file.innerHTML = '<input type="checkbox" name=""><span class="fileName" contenteditable>' + fileName + '</span>'; 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; i < fileNames.length; i++) { 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") /* query方法只獲取一次，dom修改瞭如果不重新獲取，它是不會和dom同步的而get方法會時時和dom同步，dom改了get獲取到的資料也會自定修改 */ //console.log(fileName,input); for(var i = 0; i < fileName.length; 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 < fileNames.length; 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 < names.length; 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; } }; </script> </head> <body> <div class="info"></div> <header> <input type="button" value="新建資料夾" class="creat" /> <input type="button" value="刪除資料夾" class="del" /> </header> <div class="wrap"> <!-- <div class="file fileShow"> <input type="checkbox" name=""> <span class="fileName">新建資料夾新建資料夾</span> </div> --> </div> </body> </html>