JS怎么实现电影票选座
短信预约 -IT技能 免费直播动态提醒
本文小编为大家详细介绍“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怎么实现电影票选座”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
