这里有新鲜出炉的Javascript教程,程序狗速度看过来!
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了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>
来源: http://www.phperz.com/article/17/0904/338609.html