Это 4-й день моего участия в ноябрьском испытании обновлений.Подробности о событии:Вызов последнего обновления 2021 г.

Перейдите непосредственно к названию этой статьи. В этой статье используется JavaScript для реализации специальных эффектов выбора билетов в кино. Давайте продолжим читать.

1. HTML-макет

Для реализации дизайна соответствующих областей html-макет выглядит следующим образом:

1. Область маркировки сиденья

2. Центральная область экрана

Основной html-код макета выглядит следующим образом:

 <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">屏幕中央</div>
    </div>

2. Стиль CSS

Поскольку основная цель состоит в том, чтобы попрактиковаться в коде javascript, как удобно получить информацию о стиле макета html, стиль выглядит следующим образом:

Стиль незанятых мест в кинотеатре следующий:

Стиль занятых мест в кинотеатре следующий:

Макет после добавления информации о стиле выглядит следующим образом:

3. Спецэффекты Javascript

1. Суть специального эффекта выбора места заключается в том, как контролировать и отображать занятые или незанятые места, поэтому сначала получите список меток каждого места через имя класса, и код выглядит следующим образом:

let seat = document.getElementsByClassName("seat");

2. Установите событие отклика на щелчок мыши для каждого объекта этикетки. Этот специальный эффект в основном показывает, занято ли место или нет, путем переключения стиля метки места.Когда имя класса перед щелчком мыши «место», измените имя класса на «выбрано» и измените текст в метка места на «занято» и наоборот.

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 = "已占"
        } else {
            this.className = "seat";
            this.innerText = ""
        }
        console.log(this.className);
    })
}

На этом спецэффекты выбора билетов в кино завершены! Посыпать цветами, хи хи хи★,°:.☆(￣▽￣)/$: .°★.

URL-адрес видео станции B:woooooooooo.scaler.com/video/BV1UB…