JS實現電影票選座的項目示例
更新時間：2022年04月07日 11:17:45 作者：dengfengling999
電影院選座基本上每個人都用到過，本文主要介紹了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 style="clear: both;"></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實現電影票選座的項目示例的文章就介紹到這了,更多相關JS 電影票選座內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序class封裝http,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
我們很容易被漂亮的代碼吸引，也不知不覺的在自己的代碼庫中加入這些。卻沒有冷靜的想過它們的優(yōu)劣。這不，我就收集了一系列形如 是否為……？ 的判斷的boolean函數2012-08-08
下面小編就為大家?guī)硪黄獪\談在js傳遞參數中含加號(+)的處理方式。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
用bootstrap做出的項目輪播圖在手機端不能滑動，為此找了好多插件、框架。但是都不能和bootstrap良好的結合。經過一番折騰終于找到了解決方法，下面小編通過本文給大家簡單介紹下2016-10-10
2009-06-06
javascript之鎖定表格欄位...2007-06-06
下面小編就為大家?guī)硪黄狫avaScript注入漏洞的原理及防范(詳解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要介紹了JavaScript輸入框字數實時統(tǒng)計更新，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文主要介紹了echarts折線圖每段顯示不同的顏色的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-09-09
本文主要介紹了常用的js方法的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03