您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)javascript如何實(shí)現(xiàn)新建文件夾的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
javascript實(shí)現(xiàn)新建文件夾的方法:首先創(chuàng)建一個(gè)HTML示例文件;然后創(chuàng)建一個(gè)新建文件夾的按鈕;最后使用js以及DOM方法實(shí)現(xiàn)新建文件夾的功能即可。
本文操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
JS實(shí)現(xiàn)新建文件夾功能
JS 小demo之新建文件夾。
主要知識點(diǎn):DOM方法的綜合運(yùn)用
<!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 使內(nèi)容可以編輯 --> <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(){ /* 創(chuàng)建元素,并添加事件 */ var file = document.createElement('p'); 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方法會時(shí)時(shí)和dom同步,dom改了get獲取到的數(shù)據(jù)也會自定修改 */ //console.log(fileName,input); for(var i = 0; i < fileName.length; i++){ wrap.removeChild(fileName[i].parentNode); } console.log(fileName); }; // 獲取文件夾名字 /* 創(chuàng)建文件夾名字并進(jìn)行排序 0 新建文件夾 1 新建文件夾2 2 新建文件夾3 第一種情況:正常排序 */ function getFileName(){ var fileName = "新建文件夾"; var fileNameLast = ""; var fileNames = wrap.querySelectorAll('.fileName'); if(fileNames.length == 0){ //當(dāng)前一個(gè)都還沒有也就是創(chuàng)建第0個(gè) return fileName; } // 當(dāng)中間可能刪除了幾個(gè) /* 由于中間會刪除再添加,所以順序會被打亂 把所有的名字存入數(shù)組,然后進(jìn)行排序 */ 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)){ /*篩選掉不是已新建文件夾跟隨的不是數(shù)字的*/ 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); } } //當(dāng)前順序向后排列 name 就等于在當(dāng)前的個(gè)數(shù)上+1 fileNameLast = names.length + 1; fileName += fileNameLast; return fileName; } }; </script> </head> <body> <p class="info"></p> <header> <input type="button" value="新建文件夾" class="creat" /> <input type="button" value="刪除文件夾" class="del" /> </header> <p class="wrap"> <!-- <p class="file fileShow"> <input type="checkbox" name=""> <span class="fileName">新建文件夾新建文件夾</span> </p> --> </p> </body> </html>
感謝各位的閱讀!關(guān)于“javascript如何實(shí)現(xiàn)新建文件夾”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。