This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

This article uses javascript to implement special effects of movie ticket seats. Let us continue to read.

1. HTML layout

To achieve the design of the relevant needs of the area, THE HTML layout is as follows:

1. Seat label area

2. Central area of the screen

The core HTML code for the layout is as follows:

 <div class="ticketselect">
        <div class="seats">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
        <div class="screen">The central screen</div>
    </div>
Copy the code

2. CSS styles

Because mainly for the practice of javascript code, HTML layout style information how convenient how to come, the style is as follows:

The movie theater seats that are not occupied are shown below:

The cinema seats are already occupied as shown below:

The layout after adding the style information is as follows:

Third, Javascript effects

1. The core effect of seat selection is how to control and show that seats are occupied or unoccupied, so first of all, the tag list of each seat is obtained through the class name, and the code is as follows:

let seat = document.getElementsByClassName("seat");
Copy the code

2. Set mouse click response events for each label object. The effect is mainly to show that the seat is occupied or unoccupied by switching the style of the seat label. When the mouse clicks on the class name “seat”, change the class name to “selected”, and change the text in the seat label to “occupied”, and vice versa.

for (let i = 0; i < seat.length; i++) {
    seat.index = i;
    seat[i].addEventListener("click".function() {
        let classname = this.className;
        console.log(classname == "seat");
        if (classname == "seat") {
            this.className = "selected";
            this.innerText = "Accounted for"
        } else {
            this.className = "seat";
            this.innerText = ""
        }
        console.log(this.className); })}Copy the code

At this point, the movie ticket booth special effects are complete! * (￣▽￣)/$:.°★.

B station video website: www.bilibili.com/video/BV1ub…