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的倒计时插件代码
May 07 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 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图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Python sys.path详细介绍
2013/10/17 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python使用wxPython实现计算器
2018/01/30 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Python 高效编程技巧分享
2020/09/10 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
String和StringBuffer的区别
2015/08/13 面试题
EntityManager都有哪些方法
2013/11/01 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
音乐教师求职信
2014/06/28 职场文书
重阳节标语大全
2014/10/07 职场文书
办理收楼委托书范本
2014/10/09 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang