새 폴더 생성에 대한 JS 소규모 데모 튜토리얼-JS 튜토리얼-php.cn

문서 body { margin: 0; } header { border-bottom: 2px solid #000; height: 40px; line-height: 40px; text- align: center; } .file { 여백: 20px; float: 왼쪽; 위치: 상대; 너비: 100px; 높이: 110px; border-radius: 5px; border: 1px solid rgba(0 , 0, 0, 0); 배경: url(img/file.png) 반복 없음 중심 25px; 커서: 포인터; } .file 입력 { 위치: 절대; 왼쪽: 3px; 위쪽: 3px; 디스플레이: 없음; } .fileName { 위치: 절대; 왼쪽: 5px; 하단: 10px; 너비: 90px; 글꼴: 12px/20px Arial,"宋体"; 텍스트 정렬: center; 공백: nowrap; 오버플로: 숨겨진; 텍스트 오버플로: 줄임표; } .fileShow { 테두리: 1px 솔리드 #000; 배경색: #f1f1f1; } .fileShow 입력 { 디스플레이: 블록; } .info { 위치: 고정; 왼쪽: 0; 위쪽: 0; 너비: 100%; 높이: 50px; 글꼴: 30px/50px "宋体"; text- 정렬: 센터; 변환: 번역Y(-50px); 배경: #ccc; } contenteditable 使内容可以编辑 --> window.onload = function(){ var creat = document.querySelector('.creat'); var del = document.querySelector('.del'); var Wrap = document. querySelector('.wrap'); var info = document.querySelector('.info'); var 타이머 = 0; creat.onclick = function(){ /* 创建元素，并添加事件 */ var file = document.createElement('div'); var fileName = getFileName(); file.className = "file"; file.innerHTML = ' '+fileName+' '; 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. 변환 = "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; 나는 if(this != fileNames[i]&&this.innerHTML == fileNames[i].innerHTML){ info.innerHTML = "文件夹name字 합명了，请寷新输入"; 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 == "请输入name字"){ this.innerHTML = ""; } } Wrap.appendChild(file); }; del.onclick = function(){ /* 删除选中的元素 */ var fileName = Wrap.querySelectorAll('input:checked+.fileName'); var input = wrap.getElementsByTagName ( "입력") /* 쿼리 方法 只 只 获取 一 次 次, dom 修改 了 了 如果 不 不 重新 重新 获取 获取, 它 是 不 会 会 和 dom 同步 的 而 而 时时 和 和 和 dom 同步, dom 改 了 了 了 获取到的数据也会自定修改 */ //console.log(fileName,input); for(var i = 0; i Wrap.removeChild(fileName[i]. parentNode); } console.log(fileName); }; // 获取文件夹name字 /* 创建文件夹name字并进行排序 0 新建文件夹 1 新建文件夹2 2 새로운 建文件夹3

第一种情况：正常排序

*/ function getFileName(){ var fileName = "새 폴더"; var fileNameLast = ""; var fileNames = Wrap.querySelectorAll('.fileName'); if(fileNames.length == 0) { //현재는 아무도 없습니다, 즉 0번째가 생성됩니다 return fileName; } // 중간에 여러개 삭제되었을 수도 있습니다 /* 중간을 삭제한 후 추가할 예정이므로 순서는 Put all 이름은 배열에 저장된 후 정렬됩니다 */ var names = []; for(var i = 0; i names.push(fileNames[ i].innerHTML); }

names = names.filter(function(val){ var startName = val.substr(0,5); if(startName != "New Folder"){ 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 if(names[0] != fileName){ return fileName; } if(i&gt ;0 && names[i] != fileName+ (i+1)){ return fileName+(i+1); } } //현재 순서대로 이름을 거꾸로 배열하면 현재 숫자의 +1과 같습니다 fileNameLast = names.length + 1; fileName += fileNameLast; return fileName; } } &lt ;span class="fileName">새 폴더 새 폴더 -->

관련 기사