JS实现新建文件夹功能
作者:catEatBird 发布时间:2024-04-16 09:50:15
标签:JS,文件夹
每天一个JS 小demo之新建文件夹。主要知识点:DOM方法的综合运用
<!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>
0
投稿
猜你喜欢
- 报错如下:TabError: inconsistent use of tabs and spaces in indentation我推荐一种
- QTableWidget介绍QTableWidget是Qt程序中常用的显示数据表格的控件,类似于c#中的DataGrid。QTableWid
- 如下所示:import numpy as npimport matplotlib.pyplot as plt# 生成测试数据x = np.l
- 场景针对园区停车信息,需要对各个公司提供的停车数据进行整合并录入自家公司的大数据平台数据的录入无外乎就是对数据的增删改查下面上一个常规的写法
- 遍历并修改图像像素值在使用opencv处理图像时,有时需要对图像的每个像素点进行处理,比如取反、修改值等操作,就需要通过h和w遍历像素。依然
- ImageGrab模块用于将当前屏幕的内容或者剪贴板上的内容拷贝到PIL图像内存。当前版本只支持windows系统。一、ImageGrab模
- “高并发和多线程”总是被一起提起,给人感觉两者好像相等,实则 高并发 ≠ 多线程多线程是完成任务的一种方法,高并发是系统运行的一种状态,通过
- 1、方法一在使用多线程更新 MongoDB 数据时,需要注意以下几个方面:确认您的数据库驱动程序是否支持多线程。在 PyMongo 中,默认
- 安装MySQL ODBC驱动官方说法:MySQL ODBC 驱动程序负责在开放式数据库连接 API (ODBC API) 的帮助下访问 My
- 前言django wsgi python有个自带的wsgi模块 可以写自定义web框架 用wsgi在内部创建socket对象就可以了 自己只
- pyecharts中的Funnel函数可以绘制漏斗图,自动根据数据大小生成由大到小自上而下排列的一个漏斗样的图形。1、导入Funnel模块。
- 两个例子package main import ( "fmt" "time")func Proces
- 0X01函数说明:python range() 函数可创建一个整数列表,一般用在 for 循环中。0X02函数语法:range(start,
- 开发web应用程序是一件非常辛苦的事情,你需要花大把大把的时间来做无数的事情。假如你不运用有条理的方法,尤其是在复杂的项目中,你会承受忽视项
- 本文实例讲述了Python实现监控键盘鼠标操作。分享给大家供大家参考,具体如下:# -*- coding: utf-8 -*-import
- 前言最近在爬行 nosec.org 的数据,看了下需要模拟登录拿到cookie后才能访问想抓的数据,重要的是 nosec.org 的登录页面
- 某些情况下:我们希望在一个SQL Server下访问另一个sqlserver数据库上的数据,或者访问其他oracle数据库上的数据,要想完成
- 基本使用import unittestclass Testcase(unittest.TestCase): @classmeth
- 网上大部分教程都写的直接关闭界面,我摸索出来一个方法:同时绑定两个事件例:#自己方法self.registerButton.clicked.
- logger:日志器对象,可通过logging.getLogger()方法获取handler:处理器对象,将日志信息输出到指定位置,可通过l