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

Перейдите непосредственно к заголовку этой статьи, в этой статье используется javascript для реализации специальных эффектов системы ввода информации о студентах, давайте продолжим читать.

1. HTML-макет

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

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

2. Введена область таблицы с информацией об учащихся, а HTML-код макета выглядит следующим образом:

2. Стиль CSS

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

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

(2) Стиль области введенной информации об учащемся выглядит следующим образом:

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

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

1. Получите соответствующий объект тега. Первая часть специального эффекта системы ввода информации - это часть записи информации перед вводом, которая должна получить список объектов меток поля ввода и объект кнопки отправки информации; вторая часть - это список отображения введенного учащегося. информация, которую необходимо получить Объект этикетки списка. Код для получения объекта метки выглядит следующим образом:

let submitBtn = document.getElementById("submit");
let inputs = document.getElementsByTagName("input");
let gender = document.getElementById("std_gender");
let tbody = document.getElementsByTagName("tbody")[0];

2. Установите событие ответа на клик для кнопки отправки информации. В этом ответном событии есть три основных шага: (1) Получить информацию из поля ввода области ввода информации о студенте и сохранить эту информацию в массиве. (2) Установите строку метки вставки для введенной информации, а затем вставьте ее в область списка отображения информации. (3) Установите информацию в поле ввода области ввода информации о студенте в начальное состояние.

3. Установите событие отклика на щелчок мыши для удаленной ячейки в области таблицы информации об учащихся. Когда щелкают объект метки удаления ячейки, данные просматриваются по заданному значению индекса, а затем удаляются.

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

URL-адрес видео станции B:воооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо по