Ukryj element po kilku sekundach za pomocą JavaScript
Podczas projektowania responsywnej strony internetowej może istnieć wymóg ukrycia dodatkowych funkcji po określonym czasie, aby stworzyć efekty. Na przykład ostrzeganie użytkownika za pośrednictwem wyskakującego wiadomości przez ograniczony czas cuda przyciągania uwagi użytkownika, a tym samym powstrzymując się od obrażenia. W takich scenariuszach ukrywanie elementu po kilku sekundach za pomocą JavaScript pomaga stworzyć stronę internetową lub witrynę.
Ten samouczek wyjaśni koncepcję ukrywania elementu po kilku sekundach za pomocą JavaScript.
Jak ukryć element po kilku sekundach w JavaScript?
Następujące podejścia można wykorzystać do ukrycia elementu po kilku sekundach za pomocą JavaScript:
- "settimeout ()„Metoda z„wyświetlacz" nieruchomość.
- "settimeout ()„Metoda z„widoczność" nieruchomość.
- "JQuery”Metody.
Omówmy podane podejścia jeden po drugim!
Podejście 1: Ukryj element po kilku sekundach w JavaScript za pomocą metody Settimeout () WIth The Display Propert
„„settimeout ()”Metoda wywołuje funkcję po określonym przypisanym czasie. Natomiast "wyświetlacz”Właściwość ustawia typ wyświetlania określonego elementu. Podejścia te można wdrożyć w celu przydzielenia ustalonego czasu na pobrany element, aby ukrywał się po określonym czasie.
Składnia
Settimeout (FUNC, MILLI, PAR1, PAR2)W powyższej składni:
- "Func”Wskazuje funkcję, do której należy uzyskać dostęp.
- "mili”Odpowiada przedziałowi czasu w milisekundach, aby wykonać.
- "par1" I "par2”Wskaż dodatkowe parametry.
W powyższej składni:
- Właściwość wyświetlacza „Obiekt”Jest przypisany jako„nic".
Przykład
Poniższy przykład ilustruje podaną koncepcję:
Zastosuj kroki poniżej, jak podano w powyższym kodzie:
- Po pierwsze, dołącz „„Element o„src" I "ID”Jako jego atrybuty.
- W kodzie JS zastosuj „settimeout ()„Metoda do określonych wierszy kodu. W tym przypadku ustalony czas wyniesie 5000 milisekund = „5" sekundy.
- W ramach metody uzyskuj dostęp do zawartego elementu przez jego „ID" używając "getElementById ()" metoda.
- Następnie przypisz „wyświetlacz„Własność związana z pobieranym elementem jako„nic".
- To spowoduje ukrycie „”Element po 5 sekundach z modelu obiektu dokumentu (DOM).
Wyjście
Jak zaobserwowano w powyższym wyjściu, dołączone „„Element ukrywa się po„5" sekundy.
Podejście 2: Ukryj element po kilku sekundach w JavaScript za pomocą metody Settimeout () z właściwością widoczności
„„widoczność„Własność ustawia widoczność elementu. Ta właściwość można zastosować w połączeniu z „settimeout ()”Metoda ukrycia pobieranego elementu po ustalonym czasie.
Składnia
Obiekt.styl.widoczność = „ukryty”W tej składni:
- Widoczność określonych „Obiekt”Jest przypisany jako„ukryty".
Przykład
Przejrzyjmy poniżej podanego przykładu:
| ID | Nazwa | Wiek |
|---|---|---|
| 1 | David | 18 |
Wykonaj następujące kroki, jak podano w powyższych wierszach kodu:
- Zawierać "„Element mający atrybuty”granica" I "ID".
- Zawierają również podane wartości w tabeli w „
”,„", I " ”Tagi. - Podobnie w kodzie JavaScript zastosuj „settimeout ()„Metoda z ustalonym czasem„3" sekundy.
- Potem przywołaj „getElementById ()”Metoda pobrania dołączonego elementu, jak omówiono.
- Na koniec zastosuj „widoczność„Własność i przeznacz ją jako„ukryty". To ukryje powiązany element po 3 sekundach.
Wyjście
W powyższym wyjściu widać, że „tabela”Element ukrywa się po ustalonym czasie.
Podejście 3: Ukryj element po kilku sekundach w JavaScript za pomocą metod jQuery
„„JQuery”Metodę można zastosować w celu ukrycia odpowiedniego elementu, pobierając go bezpośrednio i zanikając po dodanym czasie.
Przykład
Przeglądmy następujący przykład:
To jest strona internetowa Linuxhint
W powyższym fragmencie kodu:
- Zawierać "JQuery„Biblioteka do wykorzystania swoich metod.
- Zawierać "
„Element o podaniu„ID".
- W kodzie JS uzyskaj dostęp do dołączonego elementu bezpośrednio za pomocą jego identyfikatora.
- Następnie zastosuj „pokazywać()„Metoda, która wyświetli pobierany element.
- „„opóźnienie()”I„ „fadeout ()„Metody będą stosowane w połączeniu, aby ukryć powiązany element po ustalonym czasie opóźnienia (”5" sekundy).
Wyjście
Powyższe dane wyjściowe oznacza, że dodany tekst jest ukryty po pięciu sekundach.
Wniosek
„„settimeout ()„Metoda z„wyświetlacz„Nieruchomość,„settimeout ()„Metoda z„widoczność„Własność lub„ ”JQuery”Metody można wykorzystać do ukrycia elementu po kilku sekundach w JavaScript. Metoda Settimeout () w połączeniu z właściwością wyświetlania lub widoczności może ukryć pobierany element po ustalonym czasie. Podczas gdy metody jQuery mogą pobierać element bezpośrednio, wyświetlać go, a następnie ukryć go, zanikając. W tym artykule wyjaśniono, jak ukryć element po kilku sekundach za pomocą JavaScript.
slide 4 to 8 of 10