JS怎么實現(xiàn)新建文件夾功能

這篇文章主要介紹了JS怎么實現(xiàn)新建文件夾功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、成都網(wǎng)站設計與策劃設計,城區(qū)網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設十載,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:城區(qū)等地區(qū)。城區(qū)做網(wǎng)站價格咨詢:18980820575

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴格的要求，能夠進行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。

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

JS怎么實現(xià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('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獲取到的數(shù)據(jù)也會自定修改 */
//console.log(fileName,input);
for(var i = 0; i < fileName.length; i++){
wrap.removeChild(fileName[i].parentNode);
}
console.log(fileName);
};
// 獲取文件夾名字
/* 
創(chuàng)建文件夾名字并進行排序
0 新建文件夾
1 新建文件夾2
2 新建文件夾3

第一種情況：正常排序
*/
function getFileName(){
var fileName = "新建文件夾";
var fileNameLast = "";
var fileNames = wrap.querySelectorAll('.fileName');
if(fileNames.length == 0){ //當前一個都還沒有也就是創(chuàng)建第0個
return fileName;
}
// 當中間可能刪除了幾個
/*
由于中間會刪除再添加，所以順序會被打亂
把所有的名字存入數(shù)組，然后進行排序
*/
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);
}
}
//當前順序向后排列 name 就等于在當前的個數(shù)上+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>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS怎么實現(xiàn)新建文件夾功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

網(wǎng)頁名稱：JS怎么實現(xiàn)新建文件夾功能
網(wǎng)頁鏈接：http://muchs.cn/article8/ihdjop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、網(wǎng)站制作、云服務器、品牌網(wǎng)站建設、微信公眾號、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站