欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现新建文件夹功能

程序员文章站 2022-06-24 16:59:41
每天一个js 小demo之新建文件夹。主要知识点:dom方法的综合运用

每天一个js 小demo之新建文件夹。主要知识点:dom方法的综合运用

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。