JS實現(xiàn)電影票選座的項目示例
簡單模擬電影票選座,詳細代碼如下:
利用js實現(xiàn)給li標(biāo)簽添加和取消屬性,來實現(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類的時候,進行添加,同時對文本進行賦值;反之,清空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) {//當(dāng)屬性值不存在 this.setAttribute('class', 'click');//設(shè)置屬性,添加一個屬性 this.innerText = '座位已選';//設(shè)置文本 } else { this.setAttribute('class', '');//取消屬性 this.innerText = '';//取消文本 } } } </script> </body> </html>
結(jié)果,初始化頁面:
可以在小方框內(nèi)隨意點擊,進行選座,點擊一次代表已選座,再點擊一次代表取消選座:下圖為隨意點擊后的畫面
到此這篇關(guān)于JS實現(xiàn)電影票選座的項目示例的文章就介紹到這了,更多相關(guān)JS 電影票選座內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
實現(xiàn)超用戶體驗 table排序javascript實現(xiàn)代碼
2009-06-06JavaScript輸入框字?jǐn)?shù)實時統(tǒng)計更新
這篇文章主要介紹了JavaScript輸入框字?jǐn)?shù)實時統(tǒng)計更新,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06