html新建文件夹,javascript实现新建文件夹的功能
这篇文章主要为大家详细介绍了JS实现新建文件夹功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
每天一个JS 小demo之新建文件夹。主要知识点:DOM方法的综合运用
Document
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;
}
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('p');
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.οnmοuseοut= 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;
}
};
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html新建文件夹,javascript实现新建文件夹的功能相关推荐
- html 判断本地文件存在,javascript怎么判断文件是否存在?
javascript怎么判断文件是否存在?下面本篇文章就来给大家介绍一下利用javascript判断文件是否存在的方法,希望对大家有所帮助. 在JavaScript中,可以通过ActiveXObjec ...
- cordova js(javascript)读取本地文件(将本地的bin文件转成字节数组)
此问题已经解决,解决方法参考我的博客: cordova本地存储(存取): 读取项目里的本地文件 文章目录 1.下面两个比较有用: 2.下面两篇博客证明不用input标签的情况下,无法获取本地文件(包括 ...
- linux查询所建文件夹,linux中的文件和文件夹的新建、查询、删除
新建文件夹 使用的mkdir命令可以新建文件夹. mkdir filename 这样就创建了一个叫做filename文件夹. 新建一个文件 新建的文件可以包括任何扩展名,.txt/.cpp/.csv ...
- 移动硬盘新建选项消失、不能新建文件夹和文件的解决方案
移动硬盘新建选项消失.不能新建文件夹和文件的解决方案 参考文章: (1)移动硬盘新建选项消失.不能新建文件夹和文件的解决方案 (2)https://www.cnblogs.com/shengxihui ...
- 如何批量新建文件夹,批量新建文件夹并命名
如何批量新建文件夹并命名?有时候我们经常需要创建大量的文件夹,来完成某些工作,相信很多上班族都遇到过.不过也都存在这样困扰,一个一个新建并且命名速度太慢了,占用了大量的上班时间,却毫无办法.那是因为大 ...
- linux 新建1 10文件夹,linux创建目录和文件的命令
linux下进行操作难免会遇到创建文件或者目录的情况,那么我们要使用什么目录来创建目录和文件呢?下面由学习啦小编为大家整理了linux创建目录和文件命令的相关知识,希望大家喜欢! 一.linux创建目 ...
- 如何在手机里新建文件夹并命名管理文件
如今的我们上到99下到小朋友,几乎人人都有手机,甚至用手机代替原来电脑才能完成的事情.比如我们平时都会用手机下载或接收一些资料,如果文件太多找起来就不方便,是否能像电脑那样新建文件夹,然后将PDF文件 ...
- 怎么样使用计算机新建文件,电脑初学者如何新建和使用文件夹
新手用电脑的第一步就是如何新建和使用文件夹?建立好了文件夹以后,就可以将文件进行分类管理了.文件夹就象书本.杂志的封面.外套,它也有相应的文件名,只要打开选中的文件夹项目,就可以找到存放在其中的文件. ...
- Matlab 新建文件夹和重命名文件夹
Matlab 新建文件夹,重命名文件夹(更改文件夹名称) 新建文件夹 ans = dos('md a'); % 在当前路径下生成文件夹a 在指定路径下,新建文件夹 ans = dos('md e:a\ ...
- 不能右键新建html文件,win7右键无新建文件夹 win7图片库无法新建文件夹
win7右键没有新建文件夹怎么回事,该如何解决 点击开始菜单,点击"所有程序"-"附件",点击"记事本": win7右键新建只有文件夹和快捷 ...
最新文章
- python自动化办公脚本下载-基于python实现自动化办公学习笔记二
- python dlib学习(六):训练模型
- 职场求生:老板说,解决不了用户流失,就要解决我,咋办?
- printf按8进制、16进制输出
- Codeforces Round #601 (Div. 2)
- 自己常用的wireshark过滤条件
- 基于XML配置方式实现对action的所有方法进行校验
- linux 自动挂载usb设备,Raspberry Pi 自动挂载USB存储设备
- postgis之获取二进制的长度
- [转贴]Linux新增用户和组
- 离散数学常见面试问题总结,含答案
- 计算机考研408的优势和劣势,为什么说计算机考研408是大趋势
- 菜狗收到了图后很开心,玩起了pdf 提交格式为flag{xxx},解密字符需小写
- LaTeX 多图 排列
- xmind的简单使用教程
- 工具使用技巧:将图片公式转为Word里的公式
- [数据结构]头插法与尾插法
- PINN内嵌物理知识神经网络投稿期刊总结
- ‘dict_keys‘ object does not support indexing错误解决
- Myabtis-plus中IService接口理解
热门文章
- WT588D语音芯片 语音模块组
- 数据库简单查询——查询的条件
- sap代加工流程图_委外加工_SAP的两种典型委外处理方法
- List集合分页操作
- 计算机部分应用显示模糊,win10系统打开部分软件字体总显示模糊的解决方法-电脑自学网...
- Win10系统高分辨率缩放时应用程序字体模糊
- 期货交易常用术语英语词汇
- 说说 title 和 alt 属性有什么区别?
- 小米笔记本装linux教程视频教程,手把手教你加装SSD,让小米笔记本运行更加666!...
- 小米笔记本装linux教程视频教程,Archlinux安装指南~小米笔记本Air 13.3英寸版本