每天一個JS 小demo之新建文件夾。主要知識點：DOM方法的綜合運用

Document

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;

}

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 = ''+fileName+'';

var check = file.querySelector('input[type = "checkbox"]');

var fileName = file.querySelector('.fileName');

file.onmouseover = function(){

this.className = "file fileShow";

};

file.οnmοuseοut= 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;

}

};

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持找一找教程網。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的新建文件夹html文件,JS实现新建文件夹功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。