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 相关文章推荐
jquery制作select列表双向选择示例代码
Sep 02 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Vue+Vux项目实践完整代码
Nov 30 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
vue 开发之路由配置方法详解
Dec 02 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函数解决SQL injection
2006/10/09 PHP
php实现的CSS更新类实例
2014/09/22 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
文字幻灯片
2006/06/26 Javascript
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
vue 自定义 select内置组件
2018/04/10 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
python多线程同步之文件读写控制
2021/02/25 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
中国央视网签名寄语
2014/01/18 职场文书
2014年大学生自我评价
2014/01/19 职场文书
设计师个人求职信范文
2014/02/02 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
甲午风云观后感
2015/06/02 职场文书
勇敢的心观后感
2015/06/09 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS