Jak utworzyć prostą listę rzeczy do zrobienia z HTML, CSS i JS

Jeśli robisz tak wiele rzeczy w tym czasie i nie możesz odpowiednio zarządzać rzeczami, to konieczne jest zorganizowanie lub ustalanie priorytetów codzienne zadanie w oparciu o priorytet zadania. W tym celu możesz wykonać listę zadań, które mogą łatwo zarządzać zadaniem. Ponadto, gdy wykonasz zadanie, możesz je usunąć z listy.

Ten post dotyczy tworzenia prostej listy rzeczy do zrobienia z pomocą HTML, CSS i JavaScript.

Jak utworzyć prostą listę rzeczy do zrobienia z HTML, CSS i JavaScript?

Aby stworzyć prostą listę rzeczy do zrobienia z HTML, CSS i JavaScript, najpierw zrób prostą listę w HTML za pomocą „

”Tag. Następnie uzyskaj dostęp do listy w CSS i zastosuj różne właściwości CSS do stylizacji listy, w tym kolor, marginesy i inne. Następnie użyj „”Tag i dodaj kod JavaScript.

Aby to zrobić, wypróbuj kod określony poniżej.

Część HTML

W części HTML postępuj zgodnie z instrukcjami krok po kroku podanymi poniżej.

Krok 1: Utwórz główny kontener Div
Najpierw zrób kontener DIV i określ „ID”Z pomocą atrybutu ID. Możesz także użyć atrybutu klasy, określając określoną nazwę.

Krok 2: Wstaw nagłówek
Użyj znacznika nagłówka, aby wstawić nagłówek do strony HTML i osadzaj tekst na nagłówek.

Krok 3: Wykonaj pole wejściowe
Określ dane wejściowe „typ" Jak "tekst”, Przypisz identyfikator i użyj atrybutu zastępczego, aby umieścić tekst w polu wejściowym.

Krok 4: Dodaj przycisk
Użyj "”Element i dodaj„na kliknięcie„Zdarzenie, aby uruchomić funkcję, gdy użytkownik kliknie„Wstawić" przycisk.

Krok 5: Zrób listę
Teraz, z pomocą „

„Tag, stworzymy listę nieoporządkowaną i dodamy element listy za pomocą„
• ”Tag:
  
  
  

  Lista rzeczy do zrobienia

  
  
  Wstawić
  
  
  
  
  • JavaScript
  
  
  • Jawa
  
  
  • HTML/CSS
  
  
  • Doker
  
  
  • Niezgoda
  
  
  • Okna
  
  
  • PowerShell
  
  
  
  

  W rezultacie lista została pomyślnie utworzona:
  

  Część CSS

  W części CSS możesz zastosować styl, uzyskując dostęp do elementu za pomocą identyfikatora lub klasy. Aby to zrobić, postępuj zgodnie z instrukcjami podanymi poniżej.

  Krok 1: styl „Main” Div
  Uzyskaj dostęp do „głównego” kontenera Div za pomocą przypisanego „ID”Wraz z selektorem jako„#główny”:

  #główny
  Margines: 20px 60px;
  Wyściółka: 30px 40px;
  

  Po uzyskaniu dostępu do kontenera Div zastosuj poniższe wymienione właściwości CSS:

  • "margines”Określa przestrzeń poza zdefiniowanym elementem.
  • "wyściółka”Określa przestrzeń wewnątrz zdefiniowanej granicy.

  Krok 2: Zastosuj styl na liście
  Uzyskaj dostęp do listy i zastosuj poniżej wspomniane nieruchomości do stylizacji listy:

  ul li
  Kursor: wskaźnik;
  Pozycja: względny;
  Wyściółka: 12px 8px 12px 40px;
  Tło: #f1cbcb;
  Rozmiar czcionki: 16px;
  Przejście: 0.3s;
  

  Tutaj:

  • "kursor”Określa, że ​​kursor myszy powinien być wyświetlany podczas wskazywania elementu.
  • "pozycja”Jest wykorzystywany do ustawiania pozycji elementu. Aby to zrobić, wartość pozycji jest ustalana jako „względna”.
  • "tło”Określa kolor z tyłu elementu.
  • "rozmiar czcionki”Właściwość CSS określa rozmiar czcionki.
  • "przemiana”Pozwala na płynną zmianę wartości właściwości, w danym czasie trwania.

  Krok 3: Ustaw kolor dla elementów listy
  Uzyskaj dostęp do dziwnych elementów listy i ustaw „tło" kolor:

  ul li: nth-child (nieparzyste)
  Tło: #CFEEEB;
  

  Uzyskaj dostęp do listy wraz z „unosić się„To jest używane, gdy mysz użytkownika nad elementem. Następnie ustaw kolor tła. Aby to zrobić, wartość jest ustawiona jako „#ddd”:

  ul li: Hover
  Tło: #ddd;
  

  Krok 4: Elementy listy stylów z klasą „sprawdzoną”
  Użyj nazwy klasy z elementem listy, aby uzyskać dostęp do elementu, w którym określono konkretny atrybut klasy:

  ul li.sprawdzony
  kolor: #fff;
  Tło: #888;
  Dekoracja tekstu: Przez linię;
  

  Następnie zastosuj nieruchomości poniżej na liście:

  • "kolor„Właściwość służy do ustawienia koloru czcionki.
  • "dekoracja tekstu”Określa stylistykę, aby tekst mógł go ozdobić. W takim przypadku wartość jest ustalana jako „linia przez„Aby stworzyć wiersz całego tekstu.

  Krok 5: Klasa główna stylu
  Aby stylizować klasę główną, uzyskać dostęp do klasy i zastosować „kolor tła”,„kolor”,„wyściółka", I "tekst-align„Właściwości CSS:

  .głowa
  kolor tła: #685EF7;
  Kolor: RGB (252, 186, 186);
  Wyściółka: 30px 40px;
  Text-Align: Center;
  

  W rezultacie lista i elementy listy zostały pomyślnie zaprojektowane:

  Część JavaScript

  W tej części skorzystaj z „”Tag i dodaj kod JavaScript pomiędzy znacznikami. Aby to zrobić, wykonaj wspomniane kroki podane poniżej:

  Krok 1: Pobierz listę
  Użyj „getElementsBaTagname ()„Metoda dostępu do listy i przechowywania w obiekcie:

  var nodelist = dokument.getElementsBaTagname („li”);

  Deklaruj zmienną:

  var i;

  Krok 2: Dołącz element
  Użyj pętli i zdefiniuj długość, aby iterować element. Następnie dodaj następujący kod:

  • Utwórz nowe elementy za pomocą „createElement ()”Metoda i przechowuj je w zmiennej.
  • Dodaj tekst dla każdego elementu za pomocą „createTextNode ()" metoda.
  • Dołącz każdy element i przechowuj utworzony element na liście:
  dla (i = 0; i < nodeList.length; i++)
  var span = dokument.createElement („span”);
  var txt = dokument.CreateTextNode („\ u00d7”);
  Zakres.className = "Close";
  Zakres.appendchild (txt);
  Nodelist [i].appendChild (span);
  

  Krok 3: Ukryj bieżącą listę listy
  Aby ukryć bieżący element listy, dostęp do klasy za pomocą „getElementsByClassName ()„Metoda i przechowuj w zmiennej:

  var close = dokument.getEntsByClassName („Close”);
  var i;

  Użyj pętli „for”, aby iterować element i wywołać funkcję, gdy użytkownik wykonuje zdarzenie.

  dla (i = 0; i < close.length; i++)
  Zamknij [i].onClick = function ()
  var div = to.Paretelement;
  div.styl.display = "none";
  
  

  Krok 4: Dodaj sprawdzony symbol
  Wybierz listę za pomocą „QuerySelelect ()”I wstaw go do zmiennej:

  var List = Dokument.QuerySelelect („UL”);

  Wywołać „addEventListener ()„Metoda i użyj„Jeśli”Instrukcja, aby sprawdzić warunek. Dodać "sprawdzony„Symbol podczas klikania elementu listy, w przeciwnym razie zwróć fałsz:

  lista.addEventListener („kliknij”, funkcja (ev)
  if (ev.cel.tagname === 'li')
  ev.cel.Lista klas.Toggle („Checked”);
  
  , FAŁSZ);

  Krok 5: Utwórz nowy element
  Aby utworzyć nowy element listy, gdy użytkownik kliknie „Wstawić”Przycisk, użyj następującego kodu:

  • Najpierw przywołaj funkcję „newelement ().
  • Utwórz element za pomocą „createElement ()„Metoda i przechowuj w zmiennej.
  • Uzyskaj dostęp do danych wejściowych za pomocą identyfikatora i dołącz dziecku.
  • Użyj instrukcji „jeśli” i sprawdź warunek. Jeśli pole tekstowe jest puste, spowoduje to powiadomienie, aby dodać coś w obszarze tekstowym. W przeciwnym razie doda dane do listy.
  • Wykorzystaj pętlę iteratora „for” i wywołać funkcję, aby uruchomić zdarzenie:
  funkcja newelement ()
  var li = dokument.createElement („li”);
  var entervalue = dokument.getElementById („input_data”).wartość;
  var t = dokument.CreateTextNode (entervalue);
  Li.appendchild (t);
  if (entervalue === ")
  alert („MUSI coś dodać”);
  
  w przeciwnym razie
  dokument.getElementById („lista”).appendchild (li);
  
  dokument.getElementById („input_data”).wartość = "";
  var span = dokument.createElement („span”);
  var txt = dokument.CreateTextNode („\ u00d7”);
  Zakres.className = "Close";
  Zakres.appendchild (txt);
  Li.appendChild (span);
  dla (i = 0; i < close.length; i++)
  Zamknij [i].onClick = function ()
  var div = to.Paretelement;
  div.styl.display = "none";
  
  
  

  Wyjście
  

  Jak widać, możemy z powodzeniem dodać i usunąć elementy na utworzonej liście rzeczy do zrobienia.

  Wniosek

  Aby utworzyć prostą listę rzeczy do zrobienia, najpierw utwórz listę w HTML za pomocą „

  ”Tag i dodaj elementy za pomocą„
  • ". Następnie uzyskaj dostęp do listy w CSS i zastosuj nieruchomości, w tym „tło”,„kolor" i inni. Następnie dodaj kod JavaScript, który uruchomiłby zdarzenie, gdy użytkownik doda dane w polu tekstowym i kliknie przycisk utworzony. W tym samouczku podano metodę tworzenia listy rzeczy do zrobienia za pomocą HTML, CSS i JavaScript.