电影选票
这里面主要是有个getAttribute（），返回布尔值，判断元素是否有这个属性；
setAttribute（属性，赋值），给元素的属性赋值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
margin:0;
padding:0;
list-style: none;
}
ul{
width:560px;
border:3px solid #eee;
margin:0 auto;
}
li{
width: 80px;
height:40px;
background: #ccc;
border:1px solid #abc;
float: left;
margin:5px;
/*选择时鼠标变成小手的样子*/
cursor: pointer;
}
div{
width:280px;
height:90px;
border:1px solid #ccc;
margin: 0 auto;
text-align: center;
line-height: 90px;
color:#333;
}
.click{
font-size:10px;
text-align:center;
line-height: 40px;
font-family: '仿宋';
font-weight: bold;
color:#333;
background: orange;
border:1px solid red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<!-- 额外标签清除li的浮动 -->
<p style="clear:both;"></p>
<div>屏幕中央</div>
</ul>
<script>
// 实现逻辑：没有click类的时候，进行添加，同时对文本进行赋值；反之，清空click，同时，文本值为空
let lis = document.getElementsByTagName('li');
for(let i=0;i<lis.length;i++){2
lis[i].onclick = function() {
let res = this.getAttribute('class');
if(!res){
this.setAttribute('class','click')
this.innerText = '座位已选'
}
else{
this.setAttribute('class','')
this.innerText = ''
}
}
}
</script>
</body>
</html>
