html新建文件夹,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('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.ο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新建文件夹,JS实现新建文件夹功能相关推荐
- linux下用js生成xml文件,使用JS读取XML文件的方法
由于项目上需要解析xml,于是各种百度,然后自己总结了下各个主流浏览器解析xml的方法,只能是很浅显的知道他的用法,但是还没有深层次的研究. 不同的浏览器对xml的解析方式不同,根据目前主流浏览器大致 ...
- java spring js文件_005-html+js+spring multipart文件上传
一.概述 需求:通过html+js+java上传最大500M的文件,需要做MD5 消息摘要以及SHA256签名,文件上传至云存储 1.1.理解http协议 https://www.cnblogs.co ...
- js读写php文件,h5+js实现本地文件读取和写入
这次给大家带来h5+js实现本地文件读取和写入,h5+js实现本地文件读取和写入的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下: 读取本地文件 Document //点击导入按钮,使fi ...
- h5读取android本地的文件,h5+js实现本地文件读取和写入
代码如下: 读取本地文件 Document //点击导入按钮,使files触发点击事件,然后完成读取文件的操作 $("#fileImport").click(function(){ ...
- html5 加入收藏夹,js添加到收藏夹代码 兼容所有浏览器
介绍一个可兼容所有浏览器的加入收藏代码代码,大概原理是这样的我们根据获取用户navigator.userAgent.toLowerCase()信息来判断浏览器,根据浏览器是否支持加入收藏js命令,如果 ...
- js上传文件到c 服务器,js上传文件到c服务器
js上传文件到c服务器 内容精选 换一换 安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...
- ASP.NET MVC 扩展HtmlHelper类为 js ,css 资源文件添加版本号
写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服 ...
- js可以控制文件上传的速度吗?
为了减轻服务器负载,对于上传和下载的情况,我们需要进行流量控制,一般的方法是服务端做限流举措,比如很多ftp服务器,但是我想是不是可以使用前端js做呢? 顺着这个想法,我查了下资料,目前来看结论是No ...
- 新建文件夹html文件,JS实现新建文件夹功能
每天一个JS 小demo之新建文件夹.主要知识点:DOM方法的综合运用 Document body { margin: 0; } header { border-bottom: 2px solid # ...
- 新建和删除文件夹js代码
<html> <head> <title>创建和删除文件夹</title> </head> <body> <h2>创 ...
最新文章
- vlc打开h264参数配置
- C++中构造函数和析构函数可以抛出异常吗?
- python 去除字符串的标点符号 用_7步搞定数据清洗-Python数据清洗指南
- mysql odbc ado性能差异_ODBC、OLEDB和ADO之间的关系 ,以及性能比较
- JavaScript表单处理的返回值问题
- 哪些情况下sql索引会失效
- php-fpm的安装与测试
- kdump需要开启吗_iPhone全新黑科技!用嘴玩手机!你会玩吗?
- VL53L0x TOF激光测距的 stm32 HAL库驱动代码
- UNIX***检测 - SCO Unix
- [javaSE] 集合框架(迭代器)
- 转:李开复:打造领导力,我的九点思考
- 第二章,用矩阵解线性方程组,01-高斯消元法
- Dragonfly 基于 P2P 的文件和镜像分发系统
- Android系统 屏幕最低背光亮度值/最高背光亮度值 调试
- 基于RTP协议的IP电话QoS监测及提高策略
- JAVA_02 j2se j2ee j2me jse jee jme
- 28岁程序身价过亿,从字节提前“退休”,网友:你到底挣了多少钱?
- vue-amap实现实现初始化并定位当前位置,搜索,定位,增加点标记
- C语言字符串函数及如何实现这些函数
热门文章
- 牛客每日练习----mxh与冰红茶的故事,mengxiang000的龙,组合数问题二
- KT148A电子语音芯片ic方案适用的场景以及常见产品类型
- LambdaQueryWrapper构建查询条件、模糊查询、范围查询、排序
- 微博先锋:Twitter系统结构分析
- 加密与启示录:Crypto是流着奶与蜜的“应许之地”
- 129:vue+openlayers:extent 在EPSG:4326,EPSG:3857,EPSG:900913,CRS:84的范围值
- php 去高去低去平均值,招标评分必备,去掉最高最低分求平均值
- Adding Powers
- 软件岗位--CTO、技术VP、技术总监、首席架构师
- 【OpenCV】基于Qt的“破产版”全能扫描王