Jak wykonać licznik przyrostowy i zmniejszający za pomocą HTML, CSS i JavaScript?

JavaScript ma różne wbudowane metody, które są powiązane z HTML i CSS w celu zbudowania stron internetowych front-end. Na większości stron internetowych obserwuje się licznik przyrostowy lub zmniejszający, który przynosi lub zmniejsza wartość, aby służyć określonym celowi. W tym celu operacje arytmetyczne, takie jak dodanie i odejmowanie, są stosowane zgodnie z potrzebami użytkownika.

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 ()
dokument.getElementById („DemoInput”).tworzyć coś();
funkcja zmniejszona ()
dokument.getElementById („DemoInput”).Stepdown ();

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.