您的位置：首页 > Web前端 > JavaScript

Js 实现类似qq个性标签的功能

2017-09-06 09:33 316 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>className</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 400px;
height: 400px;
border:1px solid #999;
}
ul li{
list-style: none;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #999;
margin: 10px;
float: left;
}
span{
padding-left: 6px;
}
</style>
<script>
window.onload=function(){
var ul=document.getElementsByTagName("ul")[0];
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
var hasLi=false;
var nli=document.createElement("li");
nli.innerHTML=this.in
ae83
nerHTML+"<span>✖</span>";
var type=this.getAttribute("data-type");
console.log(type);
nli.setAttribute("data-type",type);
var ali=ul.getElementsByTagName("li");
for(var i=0;i<ali.length;i++){
if(ali[i].getAttribute("data-type")==this.getAttribute("data-type")){
hasLi=true;
break;
}else{
hasLi=false;
}
}
if(hasLi==false){
ul.append(nli);
var span=nli.getElementsByTagName("span")[0];
span.onclick=function(){
ul.removeChild(this.parentNode);
}
}

}
}
}
</script>
</head>
<body>
<ul>

</ul>
<div>
<button data-type="yw">语文</button>
<button data-type="sx">数学</button>
<button data-type="yy">英语</button>
<button data-type="zz">政治</button>
<button data-type="ls">历史</button>
<button data-type="dl">地理</button>
<button data-type="ty">体育</button>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航