如何模拟新建文件夹-技术精选-玖叶教程网

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
fieldset{
width: 920px;
margin: 0 auto;
padding: 20px;
cursor: pointer;
border-radius: 5px;
}
legend:hover{
text-decoration: underline;
}
ul{
overflow: hidden;/*清除浮动*/
}
ul>li{
width: 103px;
height: 106px;
margin: 5px;
float: left;
text-align: center;
padding-top: 10px;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
}
ul>li:hover{
cursor: move;
border: 1px dotted #666;
}
ul>li>img{
vertical-align: top;
}
ul>li>p{
height: 17px;
line-height: 17px;
font-size: 12px;
}
ul>li>span{
width: 14px;
height: 14px;
text-align: center;
line-height: 14px;
position: absolute;
right: 0;
top: 0;
color: #999;
font-size: 12px;
background-color: #eee;
display: none
}
ul>li:hover>span{
display: block;
}
ul>li>span:hover{
color: #333;
cursor: pointer;
}
</style>
</head>
<body>
<fieldset id="">
<legend>新建文件夹</legend>
<ul>
<li>
<img src="img/file.png"/>
<p>新建文件夹(1)</p>
<span>×</span>
</li>
<li>
<img src="img/file.png"/>
<p>新建文件夹(2)</p>
<span>×</span>
</li>
<li>
<img src="img/file.png"/>
<p>新建文件夹(3)</p>
<span>×</span>
</li>
</ul>
</fieldset>

<script type="text/javascript">
    //获取legend和ul元素
    var createFile = document.querySelector("legend");
    var ul = document.querySelector("ul");
    var trash = [];//先声明一个仓库 用来存储用户删除的文件夹
    var re = /\d+/g;//正则匹配数组


    //新建文件夹点击事件
    var index = 3;
    createFile.onclick = function(){
    if(trash.length){
        //数组里面有东西
        index = trash[0];
        //拿完之后清空数组
        trash.shift();
    }else{
        //如果已经把删除的元素全部新建完毕那么此时新建文件夹应该是li的长度
        index = ul.children.length + 1;
    }
    var li = document.createElement("li");//创建li标签

    var img = document.createElement("img");//创建img标签
    img.setAttribute("src","img/file.png");//给img标签增加src属性

    var p = document.createElement("p");//创建p标签
    var ptxt = document.createTextNode("新建文件夹("+index+")");//创建p的文本节点
    p.appendChild(ptxt);//把文本插入到p标签里面

    var span = document.createElement("span");//创建span标签
    var spantxt = document.createTextNode("×");//创建sapn的文本节点
    span.appendChild(spantxt);//把文本插入到span标签里面

    li.appendChild(img);//把img插入到li中
    li.appendChild(p);//把p插入到li中
    li.appendChild(span);//把sapn插入到li中


    ul.appendChild(li);//把li插入到ul里面
    }


    //删除
    //我们删除利用事件委托(已存在的最近的祖先元素)
    ul.onclick = function(e){
    //事件对象兼容
    var ev = e || window.event;
    //事件源
    var target = ev.target || ev.srcElement;
    if(target.nodeName === "SPAN"){
    //我先把要删除的东西存储起来
    //var trash = target.parentNode;//我们这种方式只能存一个东西
    //console.log(target.previousElementSibling.innerText.match(re))

    //字符串截取
    //trash.push(target.previousElementSibling.innerText.slice(6,-1))

    //使用正则表达式匹配
    trash.push(target.previousElementSibling.innerText.match(re));//数组尾部插入

    console.log(trash)


    //删除当前被点击的span的父元素li
    target.parentNode.parentNode.removeChild(target.parentNode)
    }
    }
</script>
</body>
</html>
图片规格: 59px * 83px
玖叶教程网

前端编程开发入门

如何模拟新建文件夹
