JS实现新建文件夹功能


Posted in Javascript onJune 17, 2017

每天一个JS 小demo之新建文件夹。主要知识点:DOM方法的综合运用

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
vue实现学生信息管理系统
May 30 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 #Javascript
JS实现商品筛选功能
Aug 19 #Javascript
node文件上传功能简易实现代码
Jun 16 #Javascript
详解webpack 多入口配置
Jun 16 #Javascript
requirejs + vue 项目搭建详解
Jun 16 #Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
You might like
php递归遍历多维数组的方法
2015/04/18 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
React组件refs的使用详解
2018/02/09 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
python学习 流程控制语句详解
2016/06/01 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
机电一体化专业应届本科生求职信
2013/09/27 职场文书
实习生自荐信范文
2013/11/13 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
一体化教学实施方案
2014/05/10 职场文书
见习报告的格式
2014/11/04 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
超详细Python解释器新手安装教程
2021/05/10 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android