JS实现新建文件夹功能代码实例-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

JS实现新建文件夹功能代码实例

Jul 04, 2017 pm 03:08 PM

javascript folder baru

这篇文章主要为大家详细介绍了JS实现新建文件夹功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Document&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
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,&quot;宋体&quot;;
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 &quot;宋体&quot;;
text-align: center;
transform: translateY(-50px);
background: #ccc;
}
&lt;/style&gt;
&lt;!--
contenteditable 使内容可以编辑
--&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
window.onload = function(){
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 = function(){
/* 创建元素，并添加事件 */
var file = document.createElement(&#39;p&#39;);
var fileName = getFileName();
file.className = &quot;file&quot;;
file.innerHTML = &#39;&lt;input type=&quot;checkbox&quot; name=&quot;&quot;&gt;&lt;span class=&quot;fileName&quot; contenteditable&gt;&#39;+fileName+&#39;&lt;/span&gt;&#39;;
var check = file.querySelector(&#39;input[type = &quot;checkbox&quot;]&#39;);
var fileName = file.querySelector(&#39;.fileName&#39;);
file.onmouseover = function(){
this.className = &quot;file fileShow&quot;;
};
file.onmouseout= function(){
if(!check.checked){
this.className = &quot;file&quot;;
}
};
fileName.onblur = function(){
if(this.innerHTML.trim() == &quot;&quot;){
info.innerHTML = &quot;请输入文件夹名字&quot;;
info.style.transform = &quot;translateY(0)&quot;;
this.focus();
clearTimeout(timer);
timer=setTimeout(function(){
info.style.transform = &quot;translateY(-50px)&quot;;
},2000);
return;
}
var fileNames = document.querySelectorAll(&#39;.fileName&#39;);
for(var i = 0; i &lt; fileNames.length; i++){
if(this != fileNames[i]&amp;&amp;this.innerHTML == fileNames[i].innerHTML){
info.innerHTML = &quot;文件夹名字重名了，请重新输入&quot;;
info.style.transform = &quot;translateY(0)&quot;;
this.focus();
clearTimeout(timer);
timer=setTimeout(function(){
info.style.transform = &quot;translateY(-50px)&quot;;
},2000);
}
}
};
/*onkeydown 键盘按下 */
fileName.onkeydown = function(){
if(this.innerHTML == &quot;请输入名字&quot;){
this.innerHTML = &quot;&quot;;
}
}
wrap.appendChild(file);
};
del.onclick = function(){
/* 删除选中的元素 */
var fileName = wrap.querySelectorAll(&#39;input:checked+.fileName&#39;);
var input = wrap.getElementsByTagName(&quot;input&quot;)
/* query方法只获取一次，dom修改了如果不重新获取，它是不会和dom同步的而get方法会时时和dom同步，dom改了get获取到的数据也会自定修改 */
//console.log(fileName,input);
for(var i = 0; i &lt; fileName.length; i++){
wrap.removeChild(fileName[i].parentNode);
}
console.log(fileName);
};
// 获取文件夹名字
/* 
创建文件夹名字并进行排序
0 新建文件夹
1 新建文件夹2
2 新建文件夹3

第一种情况：正常排序
*/
function getFileName(){
var fileName = &quot;新建文件夹&quot;;
var fileNameLast = &quot;&quot;;
var fileNames = wrap.querySelectorAll(&#39;.fileName&#39;);
if(fileNames.length == 0){ //当前一个都还没有也就是创建第0个
return fileName;
}
// 当中间可能删除了几个
/*
由于中间会删除再添加，所以顺序会被打乱
把所有的名字存入数组，然后进行排序
*/
var names = [];
for(var i = 0; i &lt; fileNames.length; i++){
names.push(fileNames[i].innerHTML);
}

names = names.filter(function(val){
var startName = val.substr(0,5);
if(startName != &quot;新建文件夹&quot;){
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 &lt; names.length; i++){
if(names[0] != fileName){
return fileName;
}
if(i&gt;0 &amp;&amp; names[i] != fileName+(i+1)){
return fileName+(i+1);
}
}
//当前顺序向后排列 name 就等于在当前的个数上+1
fileNameLast = names.length + 1;
fileName += fileNameLast;
return fileName;
}
}; 
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p class=&quot;info&quot;&gt;&lt;/p&gt;
&lt;header&gt;
&lt;input type=&quot;button&quot; value=&quot;新建文件夹&quot; class=&quot;creat&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot;删除文件夹&quot; class=&quot;del&quot; /&gt;
&lt;/header&gt;
&lt;p class=&quot;wrap&quot;&gt;
&lt;!-- &lt;p class=&quot;file fileShow&quot;&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;&quot;&gt;
&lt;span class=&quot;fileName&quot;&gt;新建文件夹新建文件夹&lt;/span&gt;
&lt;/p&gt; --&gt;
&lt;/p&gt; 
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Atas ialah kandungan terperinci JS实现新建文件夹功能代码实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn