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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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抽象工厂模式(Elgg)
2010/03/21 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
基于python3的socket聊天编程
2020/02/17 Python
python3 配置logging日志类的操作
2020/04/08 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
酒店开业策划方案
2014/06/02 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
煤矿安全协议书
2014/08/20 职场文书
员工担保书范本
2015/09/22 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript