JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例
簡(jiǎn)單模擬電影票選座,詳細(xì)代碼如下:
利用js實(shí)現(xiàn)給li標(biāo)簽添加和取消屬性,來實(shí)現(xiàn)選座功能。
<!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類的時(shí)候,進(jìn)行添加,同時(shí)對(duì)文本進(jìn)行賦值;反之,清空click類,同時(shí)文本值為空 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) {//當(dāng)屬性值不存在 this.setAttribute('class', 'click');//設(shè)置屬性,添加一個(gè)屬性 this.innerText = '座位已選';//設(shè)置文本 } else { this.setAttribute('class', '');//取消屬性 this.innerText = '';//取消文本 } } } </script> </body> </html>
結(jié)果,初始化頁面:
可以在小方框內(nèi)隨意點(diǎn)擊,進(jìn)行選座,點(diǎn)擊一次代表已選座,再點(diǎn)擊一次代表取消選座:下圖為隨意點(diǎn)擊后的畫面
到此這篇關(guān)于JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例的文章就介紹到這了,更多相關(guān)JS 電影票選座內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- js實(shí)現(xiàn)checkbox全選和反選示例
- js實(shí)現(xiàn)的全國(guó)省市二級(jí)聯(lián)動(dòng)下拉選擇菜單完整實(shí)例
- 用js代碼改變單選框選中狀態(tài)的簡(jiǎn)單實(shí)例
- js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例
- Js動(dòng)態(tài)添加復(fù)選框Checkbox的實(shí)例方法
- javascript判斷單選框或復(fù)選框是否選中方法集錦
- js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框自動(dòng)選中內(nèi)容的方法
- js 判斷checkbox是否選中的實(shí)現(xiàn)代碼
相關(guān)文章
淺談在js傳遞參數(shù)中含加號(hào)(+)的處理方式
下面小編就為大家?guī)硪黄獪\談在js傳遞參數(shù)中含加號(hào)(+)的處理方式。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10BootStrap實(shí)現(xiàn)手機(jī)端輪播圖左右滑動(dòng)事件
用bootstrap做出的項(xiàng)目輪播圖在手機(jī)端不能滑動(dòng),為此找了好多插件、框架。但是都不能和bootstrap良好的結(jié)合。經(jīng)過一番折騰終于找到了解決方法,下面小編通過本文給大家簡(jiǎn)單介紹下2016-10-10JavaScript輸入框字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)更新
這篇文章主要介紹了JavaScript輸入框字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)更新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn)
本文主要介紹了echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09