新建文件夹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实现新建文件夹功能相关推荐
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- js上传文件到c 服务器,js上传文件到c服务器
js上传文件到c服务器 内容精选 换一换 安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...
- js打开服务器pdf文件,iOS使用pdf.js打开PDF文件
最近研究了下iOS打开PDF文件的方式,由于项目需要在浏览PDF文件时能使用HTML格式文件,调研了一下iOS中打开PDF文件的几种方式,发现pdf.js开源库可以做到这一点,通过调用js在线预览PD ...
- php文件改写nodejs,node.js – 提供PHP文件的nodejs,expressjs
好吧我一直在玩nodejs,expressjs和socket.io来创建一些应用程序.但现在即将到达我想要进一步采取行动的阶段. 我注意到在客户端使用PHP for twitter auth的一些节点 ...
- 引入react文件报错_react.js引入router文件后报错
我是一个初学者,目前遇到一个问题,没能定位问题的原因和解决 从router.js文件导出 RouteConfig 我的路由文件如下:router.js import React from 'react ...
- js 读取php页面内容,js读取html文件 js获取html页面显示内容
CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码 如题,CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码 JS读取TXT文件内容的代码如下: 读 ...
- js删除服务器上文件,js删除服务器文件
js删除服务器文件 内容精选 换一换 目标服务器已安装操作系统,并且处于联网状态.目标服务器已安装鲲鹏编译插件. 保护组生产站点服务器为SUSE操作系统,对该云服务器开启容灾保护后,执行切换操作,云服 ...
- 新建一个文件夹服务器,云服务器中新建文件夹命令
云服务器中新建文件夹命令 内容精选 换一换 部署提供可视化.一键式部署服务,支持并行部署和流水线无缝集成,实现部署环境标准化和部署过程自动化.本节通过以下五步介绍如何使用部署服务将项目代码部署到云主机 ...
- r中 新建HTML默认文档的快捷键,在文件夹里新建文本档的快捷键是什么?
你要在桌面空白处点右键 新建 新建文本档 才可以的 定制鼠标右键"新建"菜单选项 ----当您在Windows桌面单击鼠标右键,选择"新建"来建立快捷方式或文件 ...
- Qt之QFtp 在客户端实现文件上传、下载、新建文件夹、重命名、删除和刷新等功能
简述 本来是打算用新的类QNetworkAccessManager实现的客户端的文件上传.下载.新建文件夹.重命名.删除和刷新等功能,但是QNetworkAccessManager没有提供原本在QFt ...
最新文章
- List.FindAll 方法
- cocoaPod安装过程
- java redis缓存实例_spring项目整合ehcache和redis缓存实例
- java 标记_Java中的标记语句块?
- vc6可编译的 linux 源码,winpcap+vc6编译环境配置,以及获取网络设备列表的源代码...
- python中scale的用法_Tkinter Scale滑块组件的用法
- 数据库---事务(二)
- 两个经典的Oracle触发器示例
- appium+Python真机运行测试demo的方法
- 太牛X了,大四学生自创文言文编程语言,Hello World竟然这样写!?
- 软件测试工程师企业级培训视频教程
- matlab程序的m语言,M语言GMSK程序求教
- PHP快速入门指南-基础篇一
- 七:对微服务配置中心的理解
- lucene最新版本下载地址(找死我了)
- php读取加密sqlite,加密你的SQLite
- 家具力学性能测试软件,家具力学性能
- c语言c2056错误,C语言中文网_c.biancheng.net - 爱站网站排行榜
- 【科软课程-信息安全】Lab12 SQL Injection Attack
- 安兔兔电脑ssd测试软件,不服跑个分?安兔兔推出了一款固态硬盘测速软件
热门文章
- 猜测:引力与空间映射
- 1. 列维过程的混沌及可料表示(1)
- 【Paper】2013_Autonomous Cooperation Between UAV and UGV to Improve Navigation and Environmental
- 【Paper】41_[24]novel type of phase transition in a system of self-driven particles
- 3.7 注意力模型直观理解-深度学习第五课《序列模型》-Stanford吴恩达教授
- 一起学nRF51xx 22 - 实现一个具体SVC调用功能的demo
- Modelsim do文件的自动化仿真及模板
- Android 4.0 Notification
- 【arduino】arduino ISP下载程序方法,用arduino uno给arduino nano下载程序
- 时域和频域的麦克斯韦方程组