介绍 JS有什么特点 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt; meta charset=癠TF-8"祝辞
& lt; title> Document
& lt; style 类型=拔谋?css"比;
body {
保证金:0;
},
header {
边界底部:2 px solid # 000;
高度:40像素;
行高:40像素;
text-align:中心;
}
.file {
保证金:20 px;
浮:左;
位置:,相对;
宽度:100 px;
身高:110 px;
border - radius: 5 px;
边界:1 px solid rgba (0, 0, 0, 0);
背景:,url (img/file.png), no-repeat center 25 px;
光标:指针;
}
.file input {
位置:绝对的;
左:,3 px;
上图:,3 px;
显示:没有;
}
.fileName {
位置:绝对的;
左:,5 px;
底部:10 px;
宽度:90 px;
字体:12 px/20 px Arial,“宋体“;
text-align:中心;
空白:nowrap;}
溢出:隐藏;
文本溢出:省略;
}
.fileShow {
边界:1 px solid # 000;
background - color: # f1f1f1;
}
.fileShow input {
显示:块;
}
.info {
位置:,固定;
左:0;
顶部:0;
宽度:100%;
高度:50 px;
字体:30 px/50 px “宋体“;
text-align:中心;
变换:translateY (-50 px);
背景:# ccc;
}
& lt;/style>
& lt; !
contenteditable 使内容可以编辑
——比;
& lt; script 类型=拔谋?javascript"比;
时间=window.onload 函数(){
var creat =, document.querySelector (& # 39; .creat& # 39;);
var del =, document.querySelector(& # 39;为. del # 39;);
var wrap =, document.querySelector (& # 39; .wrap& # 39;);
var info =, document.querySelector (& # 39; info # 39;);
var timer =, 0;
时间=creat.onclick 函数(){/*,创建元素,并添加事件,*/var file =, document.createElement (& # 39; div # 39;);
var fileName =, getFileName ();
时间=file.className “file";=file.innerHTML & # 39; & lt; input 类型=癱heckbox", name=啊白４? lt; span 类=癴ileName", contenteditable> & # 39; +文件名+ & # 39;& lt;/span> & # 39;;
var check =, file.querySelector(& # 39;输入[=type “checkbox"] & # 39;);
var fileName =, file.querySelector (& # 39; .fileName& # 39;);
时间=file.onmouseover 函数(){
时间=this.className “file fileShow";
};
file.onmouseout=, function () {
如果(! check.checked) {
时间=this.className “file";
}
};
时间=fileName.onblur 函数(){
如果(this.innerHTML.trim (),==,““) {
时间=info.innerHTML “请输入文件夹名字“;
时间=info.style.transform “translateY (0)“;
this.focus ();
clearTimeout(计时器);
计时器=setTimeout(函数(){
时间=info.style.transform “translateY (-50 px)“;;
},2000);
返回;
}
var fileNames =, document.querySelectorAll (& # 39; .fileName& # 39;);
(var 小姐:=,0;,小姐:& lt;, fileNames.length;,我+ +){
如果(却;能够!=,文件名(我),和this.innerHTML ==,文件名[我].innerHTML) {
时间=info.innerHTML “文件夹名字重名了,请重新输入“;
时间=info.style.transform “translateY (0)“;
this.focus ();
clearTimeout(计时器);
计时器=setTimeout(函数(){
时间=info.style.transform “translateY (-50 px)“;;
},2000);
}
}
};/* onkeydown 键盘按下,*/时间=fileName.onkeydown 函数(){
如果(this.innerHTML ==,“请输入名字“){
时间=this.innerHTML “,“;
}
}
wrap.appendChild(文件);
};
时间=del.onclick 函数(){/*,删除选中的元素,*/var fileName =, wrap.querySelectorAll(& # 39;输入:检查+ .fileName& # 39;);
var input =, wrap.getElementsByTagName (“input")/*,查询方法只获取一次,dom修改了如果不重新获取,它是不会和dom同步的而得到方法会时时和dom同步,dom改了获得获取到的数据也会自定修改,*///console.log(文件名,输入);
(var 小姐:=,0;,小姐:& lt;, fileName.length;,我+ +){
wrap.removeChild(文件名[我].parentNode);
}
console.log(文件名);
};//,获取文件夹名字/*,
创建文件夹名字并进行排序
0,新建文件夹
1,新建文件夹2
2,新建文件夹3
第一种情况:正常排序
*/function getFileName () {
var fileName =,“新建文件夹“;
var fileNameLast =,““
var fileNames =, wrap.querySelectorAll (& # 39; .fileName& # 39;);
如果(fileNames.length ==, 0){,//当前一个都还没有也就是创建第0个
return 文件名;
}//,当中间可能删除了几个/*
由于中间会删除再添加,所以顺序会被打乱
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了JS怎么实现新建文件夹功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
1, JS属于一种解释性脚本语言;2,在绝大多数浏览器的支持下,JS可以在多种平台下运行,拥有着跨平台特性;3,JS属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4,JS语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5,基于对象的脚本语言,JS不仅可以创建对象,也能使用现有的对象。
每天一个JS小演示之新建文件夹。主要知识点:DOM方法的综合运用
