使用js在页面上新建文件夹
使用js在页面上新建文件夹
<!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>使用js在页面上新建文件夹的更多相关文章
- 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹
功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行:单击页面的新增行,使单元格td变成可编辑状态:输入内容后,当单元格失去焦点时,保存输入的内容:回车后通过AJAX提交后台完成新建文件夹. ...
- js能否上传文件夹
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- web前端:上传文件夹(需支持多浏览器)
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
- Nodejs学习笔记（八）--- Node.js + Express 实现上传文件功能（felixge/node-formidable）
目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能---- ...
- Nodejs学习笔记（八）—Node.js + Express 实现上传文件功能（felixge/node-formidable）
前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次 ...
- 基于Ubuntu Server 16.04 LTS版本安装和部署Django之（三）：设置上传文件夹权限（这里测试用完全共享）
基于Ubuntu Server 16.04 LTS版本安装和部署Django之(一):安装Python3-pip和Django 基于Ubuntu Server 16.04 LTS版本安装和部署Djan ...
- javaweb上传文件夹
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...
- java+上传+文件夹
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有 ...
随机推荐
- meta标签 使用说明（http-equiv、refresh、seo）
meta标签 使用说明(http-equiv.refresh.seo) meta标签,是在head标签里面,一般用做页面描述的.它的内容,用来描述页面一些信息的,如类型.编码.作者.简介等!虽然,它不 ...
- 113、TensorFlow变量集合
#一个tensorflow程序断开的部分可能要创建变量 # 如果有一种方法来访问所有的变量是非常有用的 #因为这个原因TensorFlow提供了集合,是一些张量的集合 #或者是其他的对象,就像tf.V ...
- 测开之路三十八：css布局之定位
常用的布局方式: static:静态定位(默认),什么都不用管,元素会按照默认顺序排列,排不下是会默认换行relative:相对定位(同一层),相对于某一个元素进行定位fixed:绝对定位,指定位置a ...
- Bootstrap 学习笔记3 输入框和导航组件
导航组件: 导航条组件: 导航条代码: <nav class="navbar navbar-default"> <div class="containe ...
- [题解]Shorten IPv6 Address-模拟（2019牛客多校第六场B题）
题目链接:https://ac.nowcoder.com/acm/contest/886/B 题意: 您将获得一个IPv6地址,该地址是128位二进制字符串.请根据以下规则确定其最短的表示: 以十六进 ...
- Linear Regression and Gradient Descent (English version)
1.Problem and Loss Function Linear Regression is a Supervised Learning Algorithm with input matrix ...
- 一些关于SEO优化的笔记
高级搜索指令: 双引号:“xxx” 代表完全匹配的搜索 减号:-(减号前面必须是空格,后面必须没有空格)代表搜索不包含减号后面的词的页面 filetype:用于搜索特定文件格式(百度支持的文件类型:P ...
- idea配置svn正确步骤（下载svn的过程就不写了）
打开----->File------>Settings 2. 3在vcs中选择 4进入此界面 5选择 这样svn就配置好了
- centOS发布.Net Core 2.0 API
1.dotnet xxx.dll & & 放在启动参数后面表示设置此进程为后台进程.(目前测试无效) 2.ps -ef | grep xxx ps:将某个进程显示出来 -A 显示所有 ...
- leetcode.排序.347前k个高频元素-Java
1. 具体题目 给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2,2,3], k = 2 输出: [1,2] 示例 2: 输入: nums ...