Ten przewodnik zawiera procedurę krok po kroku w celu utworzenia licznika przyrostowego i zmniejszającego przy użyciu HTML, CSS i JavaScript.
Jak zrobić licznik przyrostowy i zmniejszający?
Znaczenie przyrostu w programowaniu polega na dodaniu określonej liczby do istniejącej liczby, podczas gdy zmniejszenie oznacza odejmowanie liczby od istniejącej liczby. Licznik przyrostowy i zmniejszający ma swoje znaczenie w witrynach e-commerce.
Przykład
W tym przykładowym kodzie tworzymy przyrostowy i zmniejszony projekt licznika, wykorzystując HTML, CSS i JavaScript.
Kod HTML
Przykład licznika przyrostu i zmniejszenia
W powyższym HTML tworzone są dwa przyciski. Jeden przycisk ma funkcję increment () w swoim zdarze.
Kod CSS
Właściwości stylizacji są zaimplementowane na przycisku licznika, a także nagłówki. Właściwości te obejmują szerokość, wysokość, rozmiar czcionki, kolor tła, kolor itp.
Kod JavaScript
Funkcja increment ()W tym pliku dwie metody przyrost() I zmniejszenie () są wykorzystywane w ramachetykietka. przyrost() Metoda służy do zwiększenia wartości o jeden. Podobnie zmniejszenie () Metoda jest stosowana do zmniejszenia wartości o jeden. Domyślnie metody StepUp () i Stepdown () rosną i zmniejszają wartość o 1. Można jednak ustawić interwał, przekazując wymaganą wartość w metodach StepUp () i StepDown (). Na przykład Stepup (2) zwiększy wartość o 2.
Kompletny kod
Przykład licznika przyrostu i zmniejszenia
Powyższy kod jest wykonywany w .plik HTML.
Wyjście
Wyjście zwraca pole wejściowe z dwoma przyciskami.
Początkowo pole tekstowe nie zawiera żadnych liczb. Po naciśnięciu przycisku „+” wartość zaczyna się rosnąć, podczas gdy przycisk „-” zmniejsza wartość.
Wniosek
liczniki przyrostowe i zmniejszone są zastosowane do zwiększenia lub zmniejszenia wartości przez określoną liczbę. To zjawisko przyrostowe/zmniejszające jest wykorzystywane głównie na koszykach witryn online. Tutaj nauczyłeś się projektować liczniki przyrostowe i zmniejszające za pomocą pomocy Html, CSS, I JavaScript. Zwykle wartość przyrostu lub zmniejszenia licznika jest ustawiona na „1”. Możesz jednak ustawić wartość przedziału zgodnie z Twoimi wymaganiami.