Fork me on Gitee

使用js在页面上新建文件夹

使用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>
posted @ 2018-11-30 11:45  明叶师兄。  阅读(2764)  评论(0编辑  收藏  举报