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

用javaScript制作一个简易的课程表

2018-02-23 08:07 549 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>
</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>
<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;
/*创建li标签*/
var nli=document.createElement("li");
/*赋值*/
nli.innerHTML=this.innerHTML+"<span>✖</span>";
/*当前点击按钮的type值*/
var type=this.getAttribute("data-type");
console.log(type);
/*给li设置data-type值*/
nli.setAttribute("data-type",type);
/*找到所有li*/
var ali=ul.getElementsByTagName("li");
/*遍历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>
</body>
</html>

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

标签： JavaScript 课程表

相关文章推荐

新的分享

章节导航