JS实现新建文件夹功能
程序员文章站
2022-06-24 16:59:41
每天一个js 小demo之新建文件夹。主要知识点:dom方法的综合运用
每天一个js 小demo之新建文件夹。主要知识点:dom方法的综合运用
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> 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,"宋体"; 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 "宋体"; text-align: center; transform: translatey(-50px); background: #ccc; } </style> <!-- contenteditable 使内容可以编辑 --> <script type="text/javascript"> window.onload = function(){ var creat = document.queryselector('.creat'); var del = document.queryselector('.del'); var wrap = document.queryselector('.wrap'); var info = document.queryselector('.info'); var timer = 0; creat.onclick = function(){ /* 创建元素,并添加事件 */ var file = document.createelement('div'); var filename = getfilename(); file.classname = "file"; file.innerhtml = '<input type="checkbox" name=""><span class="filename" contenteditable>'+filename+'</span>'; 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.transform = "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; i < filenames.length; i++){ if(this != filenames[i]&&this.innerhtml == filenames[i].innerhtml){ info.innerhtml = "文件夹名字重名了,请重新输入"; 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 == "请输入名字"){ this.innerhtml = ""; } } wrap.appendchild(file); }; del.onclick = function(){ /* 删除选中的元素 */ var filename = wrap.queryselectorall('input:checked+.filename'); var input = wrap.getelementsbytagname("input") /* query方法只获取一次,dom修改了如果不重新获取,它是不会和dom同步的而get方法会时时和dom同步,dom改了get获取到的数据也会自定修改 */ //console.log(filename,input); for(var i = 0; i < filename.length; i++){ wrap.removechild(filename[i].parentnode); } console.log(filename); }; // 获取文件夹名字 /* 创建文件夹名字并进行排序 0 新建文件夹 1 新建文件夹2 2 新建文件夹3 第一种情况:正常排序 */ function getfilename(){ var filename = "新建文件夹"; var filenamelast = ""; var filenames = wrap.queryselectorall('.filename'); if(filenames.length == 0){ //当前一个都还没有也就是创建第0个 return filename; } // 当中间可能删除了几个 /* 由于中间会删除再添加,所以顺序会被打乱 把所有的名字存入数组,然后进行排序 */ var names = []; for(var i = 0; i < filenames.length; i++){ names.push(filenames[i].innerhtml); } names = names.filter(function(val){ var startname = val.substr(0,5); if(startname != "新建文件夹"){ 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 < names.length; i++){ if(names[0] != filename){ return filename; } if(i>0 && names[i] != filename+(i+1)){ return filename+(i+1); } } //当前顺序向后排列 name 就等于在当前的个数上+1 filenamelast = names.length + 1; filename += filenamelast; return filename; } }; </script> </head> <body> <div class="info"></div> <header> <input type="button" value="新建文件夹" class="creat" /> <input type="button" value="删除文件夹" class="del" /> </header> <div class="wrap"> <!-- <div class="file fileshow"> <input type="checkbox" name=""> <span class="filename">新建文件夹新建文件夹</span> </div> --> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。