溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“JS怎么實現電影票選座”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JS怎么實現電影票選座”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
簡單模擬電影票選座，詳細代碼如下：
利用js實現給li標簽添加和取消屬性，來實現選座功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 100px;
margin: 60px auto;
text-align: center;
line-height: 100px;
border: 1px solid black;
}
ul {
width: 650px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
}
li {
margin: 10px;
width: 80px;
height: 50px;
float: left;
list-style: none;
background: #C0C0C0;
border: 1px solid #C0C0C0;
}
.click {
font-size: 10px;
text-align: center;
line-height: 50px;
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>
<p ></p>
<div>屏幕中央</div>
</ul>
<script>
//沒有click類的時候，進行添加，同時對文本進行賦值；反之，清空click類，同時文本值為空
let lis = document.getElementsByTagName('li');//獲取li元素
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
//getAttribute() 方法返回指定屬性名的屬性值
let res = this.getAttribute('class');//getAttribute（）判斷class屬性是否存在
if (!res) {//當屬性值不存在
this.setAttribute('class', 'click');//設置屬性，添加一個屬性
this.innerText = '座位已選';//設置文本
} else {
this.setAttribute('class', '');//取消屬性
this.innerText = '';//取消文本
}
}
}
</script>
</body>
</html>結果，初始化頁面：
可以在小方框內隨意點擊，進行選座，點擊一次代表已選座，再點擊一次代表取消選座：下圖為隨意點擊后的畫面
讀到這里，這篇“JS怎么實現電影票選座”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
