JS 小demo之新建文件夹的实例教程

<script type="text/<a style=" color: text-decoration:underline title="javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript"><br/>window.onload = function(){<br/> var creat = document.querySelector(&#39;.creat&#39;);<br/> var del = document.querySelector(&#39;.del&#39;);<br/> var wrap = document.querySelector(&#39;.wrap&#39;);<br/> var info = document.querySelector(&#39;.info&#39;);<br/> var timer = 0;<br/> creat.onclick = function(){<br/> /* 创建元素，并添加事件 */<br/> var file = document.createElement(&#39;div&#39;);<br/> var fileName = getFileName();<br/> file.className = "file";<br/> file.innerHTML = &#39;<input type="checkbox" name=""><span class="fileName" contenteditable>&#39;+fileName+&#39;&#39;;<br/> var check = file.querySelector(&#39;input[type = "checkbox"]&#39;);<br/> var fileName = file.querySelector(&#39;.fileName&#39;);<br/> file.onmouseover = function(){<br/> this.className = "file fileShow";<br/> };<br/> file.onmouseout= function(){<br/> if(!check.checked){<br/> this.className = "file";<br/> }<br/> };<br/> fileName.onblur = function(){<br/> if(this.innerHTML.trim() == ""){<br/> info.innerHTML = "请输入文件夹名字";<br/> info.style.transform = "translateY(0)";<br/> this.focus();<br/> clearTimeout(timer);<br/> timer=setTimeout(function(){<br/> info.style.transform = "translateY(-50px)";<br/> },2000);<br/> return;<br/> }<br/> var fileNames = document.querySelectorAll(&#39;.fileName&#39;);<br/> for(var i = 0; i < fileNames.length; i++){<br/> if(this != fileNames[i]&&this.innerHTML == fileNames[i].innerHTML){<br/> info.innerHTML = "文件夹名字重名了，请重新输入";<br/> info.style.transform = "translateY(0)";<br/> this.focus();<br/> clearTimeout(timer);<br/> timer=setTimeout(function(){<br/> info.style.transform = "translateY(-50px)";<br/> },2000);<br/> }<br/> }<br/> };<br/> /*onkeydown 键盘按下 */<br/> fileName.onkeydown = function(){<br/> if(this.innerHTML == "请输入名字"){<br/> this.innerHTML = "";<br/> }<br/> }<br/> wrap.appendChild(file);<br/> };<br/> del.onclick = function(){<br/> /* 删除选中的元素 */<br/> var fileName = wrap.querySelectorAll(&#39;input:checked+.fileName&#39;);<br/> var input = wrap.getElementsByTagName("input")<br/> /* query方法只获取一次，dom修改了如果不重新获取，它是不会和dom同步的而get方法会时时和dom同步，dom改了get获取到的数据也会自定修改 */<br/> //console.log(fileName,input);<br/> for(var i = 0; i < fileName.length; i++){<br/> wrap.removeChild(fileName[i].parentNode);<br/> }<br/> console.log(fileName);<br/> };<br/> // 获取文件夹名字<br/> /* <br/> 创建文件夹名字并进行排序<br/> 0 新建文件夹<br/> 1 新建文件夹2<br/> 2 新建文件夹3 <p> 第一种情况：正常排序<br/><p> */<br/> function getFileName(){<br/> var fileName = "新建文件夹";<br/> var fileNameLast = "";<br/> var fileNames = wrap.querySelectorAll(&#39;.fileName&#39;);<br/> if(fileNames.length == 0){ //当前一个都还没有也就是创建第0个<br/> return fileName;<br/> }<br/> // 当中间可能删除了几个<br/> /*<br/> 由于中间会删除再添加，所以顺序会被打乱<br/> 把所有的名字存入数组，然后进行排序<br/> */<br/> var names = [];<br/> for(var i = 0; i < fileNames.length; i++){<br/> names.push(fileNames[i].innerHTML);<br/> }<br/><br/> names = names.filter(function(val){<br/> var startName = val.substr(0,5);<br/> if(startName != "新建文件夹"){<br/> return false;/*筛选掉不是已新建文件夹命名的*/<br/> }<br/> var lastName = val.substr(5);<br/> if(isNaN(lastName)){ /*筛选掉不是已新建文件夹跟随的不是数字的*/<br/> return false;<br/> }<br/> return true;<br/> });<br/> names.sort(function(a,b){<br/> return a.substr(5) - b.substr(5); <br/> });<br/> console.log(names);<br/> for(var i = 0; i < names.length; i++){<br/> if(names[0] != fileName){<br/> return fileName;<br/> }<br/> if(i>0 && names[i] != fileName+(i+1)){<br/> return fileName+(i+1);<br/> }<br/> }<br/> //当前顺序向后排列 name 就等于在当前的个数上+1<br/> fileNameLast = names.length + 1;<br/> fileName += fileNameLast;<br/> return fileName;<br/> }<br/>}; <br/></script>