使用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方式提交有 ...
随机推荐
- 【Angular】No component factory found for ×××.
报错现象: 用modal打开某个组件页面时报错 报错:No component factory found for UpdateAuthWindowComponent. Did you add it ...
- 关于CSS中的单位px、em、rem
首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...
- 面试题：实现strcpy,strlen,strcmp,strcat,memcpy 之c-style字符串
哪里可以看到c库函数的源码? gnu的c运行库glibc,但是源码的实现却是复杂的,需要考虑效率,stlen源码分析. c-style字符串有个约定,以空字符结尾,即 '\0' . ' }; &quo ...
- 洛谷P4169 [Violet]天使玩偶/SJY摆棋子(CDQ分治)
[Violet]天使玩偶/SJY摆棋子 题目传送门 解题思路 用CDQ分治开了氧气跑过. 将输入给的顺序作为第一维的时间,x为第二维,y为第三维.对于距离一个询问(ax,ay),将询问分为四块,左上, ...
- PAT 2019-3 7-3 Telefraud Detection
Description: Telefraud(电信诈骗) remains a common and persistent problem in our society. In some cases, ...
- l1和l2正则化
https://blog.csdn.net/tianguiyuyu/article/details/80438630 以上是莫烦对L1和L2的理解 l2正则:权重的平方和,也就是一个圆 l1正则:权重 ...
- Java程序的设计环境配置
一.下载主要的开发工具 JDK的下载 www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html Ecli ...
- Cocos2d-x之Menu
| 版权声明:本文为博主原创文章,未经博主允许不得转载. cocos2d-x菜单简介: 菜单也是游戏开发中的重要环节,一般游戏开始的第一个画面都是游戏主菜单,这些菜单包括,开始游戏,游戏设置,关卡 ...
- css怎么解决表格边框线重复问题
<ul> <li><a href="#">1</a></li> <li><a href="# ...
- SpringBoot连接Oracle
pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...