문서 <br>body {<br> margin: 0;<br>} <br>header {<br> border-bottom: 2px solid #000;<br> height: 40px;<br> line-height: 40px;<br> text- align: center;<br>}<br>.file {<br> 여백: 20px;<br> float: 왼쪽;<br> 위치: 상대;<br> 너비: 100px;<br> 높이: 110px;<br> border-radius: 5px;<br> border: 1px solid rgba(0 , 0, 0, 0);<br> 배경: url(img/file.png) 반복 없음 중심 25px;<br> 커서: 포인터;<br>}<br>.file 입력 {<br> 위치: 절대;<br> 왼쪽: 3px;<br> 위쪽: 3px;<br> 디스플레이: 없음;<br>}<br>.fileName {<br> 위치: 절대;<br> 왼쪽: 5px;<br> 하단: 10px;<br> 너비: 90px;<br> 글꼴: 12px/20px Arial,"宋体";<br> 텍스트 정렬: center;<br> 공백: nowrap;<br> 오버플로: 숨겨진;<br> 텍스트 오버플로: 줄임표;<br>}<br>.fileShow {<br> 테두리: 1px 솔리드 #000;<br> 배경색: #f1f1f1;<br>}<br>.fileShow 입력 { <br> 디스플레이: 블록;<br>}<br>.info {<br> 위치: 고정;<br> 왼쪽: 0;<br> 위쪽: 0;<br> 너비: 100%;<br> 높이: 50px;<br> 글꼴: 30px/50px "宋体";<br> text- 정렬: 센터;<br> 변환: 번역Y(-50px);<br> 배경: #ccc;<br>}<br><br>window.onload = function(){<br> var creat = document.querySelector('.creat');<br> var del = document.querySelector('.del');<br> var Wrap = document. querySelector('.wrap');<br> var info = document.querySelector('.info');<br> var 타이머 = 0;<br> creat.onclick = function(){<br> /* 创建元素，并添加事件 */<br> var file = document.createElement('div');<br> var fileName = getFileName();<br> file.className = "file";<br> file.innerHTML = '<input type="checkbox" name="">< span class="fileName" contenteditable>'+fileName+'</span>';<br> var check = file.querySelector('input[type = "checkbox"]');<br> var fileName = file.querySelector('.fileName ');<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. 변환 = "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('.fileName');<br> for(var i = 0; 나는 < 파일이름.길이; i++){<br/> if(this != fileNames[i]&&this.innerHTML == fileNames[i].innerHTML){<br/> info.innerHTML = "文件夹name字 합명了，请寷新输入";<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 == "请输入name字"){<br/> this.innerHTML = "";<br/> }<br/> }<br/> Wrap.appendChild(file);<br/> };<br/> del.onclick = function(){<br/> /* 删除选中的元素 */<br/> var fileName = Wrap.querySelectorAll('input:checked+.fileName');<br/> var input = wrap.getElementsByTagName ( "입력") <br/> /* 쿼리 方法 只 只 获取 一 次 次, dom 修改 了 了 如果 不 不 重新 重新 获取 获取, 它 是 不 会 会 和 dom 同步 的 而 而 时时 和 和 和 dom 同步, dom 改 了 了 了 获取到的数据也会自定修改 */<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/> // 获取文件夹name字<br/> /* <br/> 创建文件夹name字并进行排序<br/> 0 新建文件夹<br/> 1 新建文件夹2<br/> 2 새로운 建文件夹3 </p><p> 第一种情况：正常排序<br/></p><p> */<br/> function getFileName(){<br/> var fileName = "새 폴더";<br/> var fileNameLast = "";<br/> var fileNames = Wrap.querySelectorAll('.fileName');<br/> if(fileNames.length == 0) { //현재는 아무도 없습니다, 즉 0번째가 생성됩니다 <br/> return fileName;<br/> }<br/> // 중간에 여러개 삭제되었을 수도 있습니다 <br/> /*<br/> 중간을 삭제한 후 추가할 예정이므로 순서는 <br/> Put all 이름은 배열에 저장된 후 정렬됩니다<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 != "New Folder"){<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/> //현재 순서대로 이름을 거꾸로 배열하면 현재 숫자의 +1과 같습니다<br/> fileNameLast = names.length + 1;<br/> fileName += fileNameLast;<br/> return fileName;<br/> }<br/>} <br/> < /html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
