ドキュメント <br>body {<br> margin: 0;<br>} <br>header {<br> border-bottom: 2px ソリッド #000;<br> height: 40px;<br> line-height: 40px;<br> text-整列: センター;<br>}<br>.file {<br> margin: 20px;<br> float: left;<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 input {<br> 位置: 絶対;<br> 左: 3px;<br> 上: 3px;<br> 表示: なし;<br>}<br>.fileName {<br> 位置: 絶対;<br> 左: 5px;<br> 下: 10px;<br> 幅: 90px;<br> フォント: 12px/20px Arial,"宋体";<br> text-align: center;<br> ホワイトスペース: nowrap;<br> オーバーフロー: 非表示;<br> テキスト オーバーフロー: ellipsis;<br>}<br>.fileShow {<br> border: 1px ソリッド #000;<br> 背景色: #f1f1f1;<br>}<br>.fileShow input { <br>表示:ブロック;<br>}<br>.info {<br>位置:固定;<br>左:0;<br>上:0;<br>幅:100%;<br>高さ:50px;<br>フォント:30px/50px "宋体";<br>テキスト-整列: 中央;<br> 変換: TranslationY(-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 timer = 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 = "ファイル fileShow";<br> };<br> file.onmouseout= function(){<br> if(!check.checked){<br> this.className = "ファイル";<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 = "文件夹名字重名了，请重新输入";<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('input:checked+.fileName');<br> var input = Wrap.getElementsByTagName("input")<br> /* クエリ メソッドのみ一回取得、dom 修正完了如果不重新获取、它是不会和dom同步的getメソッド会時和dom同步，dom改了get获取到達したデータも会自定修正 */<br> //console.log(fileName,input);<br> for(var i = 0; i <filename.length i></filename.length> Wrap.removeChild(fileName[i]. parentNode);<br> }<br> console.log(fileName);<br> };<br> // 获取文件夹名字<br> /* <br> 创建文件夹名字并进行排序<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 番目が作成されます。 return fileName;<br> }<br> // 途中でいくつか削除されている可能性があります<br> /*<br> 真ん中が削除されてから追加されるため、順序は次のようになります。中断される可能性があります<br> すべてを配置します 名前は配列に保存されてから並べ替えられます<br> */<br> var names = [];<br> for(var i = 0; i <filenames.length i></filenames.length> 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/> //名前を現在の順序で後方に並べると、現在の番号の +1 に等しくなります<br/> fileNameLast = names.length + 1;<br/> fileName += fileNameLast;<br/> return fileName;<br/> }<br/>}; <br/> < /html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
