Al visitar diferentes sitios web de compras como Flipkart y Amazon , ha visto un contador en cada producto, ese contador se usa para especificar la cantidad de ese producto. Por lo tanto, el contador es una parte muy útil para muchos sitios web. En este artículo , diseñaremos un contador utilizando HTML , CSS y JavaScript .
Se proporciona una imagen de muestra para darle una idea más clara sobre el artículo.
Implementación paso a paso:
Paso 1: Primero, diseñaremos un botón simple usando HTML . Consulte los comentarios en el código.
index.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <!-- give a suitable heading using h1 tag--> <h1>Increment and Decrement counter</h1> <div="container"> <!-- adding button and heading to show the digits --> <!--increment() and decrement() functions on button click--> <button onclick="increment()">+</button> <h2 id="counting"></h2> <button onclick="decrement()">-</button> </div> </body> </html>
Paso 2: A continuación, usaremos algunas propiedades de CSS para diseñar el botón y usaremos la clase de desplazamiento para obtener el efecto de animación cuando pasemos el mouse sobre el botón .
style.css
/*apply css properties to body tag*/
body {
position: absolute;
left: 0%;
text-align: center;
}
/*apply css properties to container class*/
.container {
justify-content: center;
align-items: center;
display: flex;
height: 100%;
text-align: center;
}
/*apply css properties to button tag*/
button {
width: 90px;
height: 60px;
font-size: 30px;
background-color: green;
color: honeydew;
}
/*apply hover effect to button tag*/
button:hover {
background-color: greenyellow;
color: grey;
}
/*apply css properties to h2 tag*/
h2 {
color: black;
margin: 0 50px;
font-size: 45px;
}
/*apply css properties to h1 tag*/
h1 {
font-size: 35px;
color: green;
text-align: center;
padding-left: 10%;
}
Paso 3: Ahora, agregaremos código JavaScript para agregar funcionalidad a los botones que hemos creado anteriormente. Consulte los comentarios en el código para obtener ayuda.
index.js
//initialising a variable name data
var data = 0;
//printing default value of data that is 0 in h2 tag
document.getElementById("counting").innerText = data;
//creation of increment function
function increment() {
data = data + 1;
document.getElementById("counting").innerText = data;
}
//creation of decrement function
function decrement() {
data = data - 1;
document.getElementById("counting").innerText = data;
}
Código completo: en esta sección, combinaremos las tres secciones anteriores para crear un contador.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CSS code-->
<style>
/*apply css properties to body tag*/
body {
position: absolute;
left: 0%;
text-align: center;
}
/*apply css properties to container class*/
.container {
justify-content: center;
align-items: center;
display: flex;
height: 100%;
text-align: center;
}
/*apply css properties to button tag*/
button {
width: 90px;
height: 60px;
font-size: 30px;
background-color: green;
color: honeydew;
}
/*apply hover effect to button tag*/
button:hover {
background-color: greenyellow;
color: grey;
}
/*apply css properties to h2 tag*/
h2 {
color: black;
margin: 0 50px;
font-size: 45px;
}
/*apply css properties to h1 tag*/
h1 {
font-size: 35px;
color: green;
text-align: center;
padding-left: 10%;
}
</style>
</head>
<body>
<!-- give a suitable heading using h1 tag-->
<h1>Increment and Decrement counter</h1>
<div ="container">
<!-- adding button and heading to show the digits -->
<!-- increment() and decrement() functions on button click-->
<button onclick="increment()">+</button>
<h2 id="counting"></h2>
<button onclick="decrement()">-</button>
</div>
<!-- JavaScript code-->
<script>
//initialising a variable name data
var data = 0;
//printing default value of data that is 0 in h2 tag
document.getElementById("counting").innerText = data;
//creation of increment function
function increment() {
data = data + 1;
document.getElementById("counting").innerText = data;
}
//creation of decrement function
function decrement() {
data = data - 1;
document.getElementById("counting").innerText = data;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riyamathur y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA