Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to achieve movie ticket selection in JS". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve movie ticket selection in JS" can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.

Simple simulation of movie ticket selection, the detailed code is as follows:

Use js to add and cancel attributes to the li tag to achieve the seat selection function.

Document 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: 'imitating Song'; font-weight: bold; color: # 333; background: orange; border: 1px solid red;}

When there is no click class in the center of the screen, add it and assign a value to the text; otherwise, clear the click class and the text value is empty let lis = document.getElementsByTagName ('li'); / / get the li element 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 = '';//取消文本 } } } 结果，初始化页面： 可以在小方框内随意点击，进行选座，点击一次代表已选座，再点击一次代表取消选座：下图为随意点击后的画面

After reading this, the article "how to achieve movie ticket selection in JS" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.