1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Contador Interactivo</title>7 <style>8 body {9 font-family: Arial, sans-serif;10 display: flex;11 flex-direction: column;12 align-items: center;13 justify-content: center;14 height: 100vh; /* Ocupa toda la altura de la vista */15 background-color: #f4f4f9;16 }17 18 .container {19 text-align: center;20 padding: 30px;21 border-radius: 15px;22 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);23 background-color: #ffffff;24 }25 26 /* Estilo del contador */27 #contador {28 font-size: 6em; /* Letra muy grande */29 margin: 20px 0;30 font-weight: bold;31 min-width: 150px; /* Asegura espacio constante para el número */32 transition: transform 0.2s ease-in-out;33 }34 35 /* Estilo de los botones */36 .buttons button {37 padding: 15px 30px;38 margin: 10px 10px;39 border: none;40 cursor: pointer;41 font-size: 1.2em;42 border-radius: 8px;43 transition: background-color 0.3s, transform 0.1s;44 }45 46 /* Botón verde (suma) */47 #bottonSuma {48 background-color: #4CAF50; /* Verde */49 color: white;50 }51 52 #bottonSuma:hover {53 background-color: #45a049;54 transform: translateY(-2px);55 }56 57 /* Botón rojo (resta) */58 #bottonResta {59 background-color: #f44336; /* Rojo */60 color: white;61 }62 63 #bottonResta:hover {64 background-color: #e53935;65 transform: translateY(-2px);66 }67 68 </style>69 </head>70 <body>71 72 <div class="container">73 <h1>Contador Personalizado</h1>74 75 <!-- Elemento donde se mostrará el número -->76 <div id="contador">0</div>77 78 <!-- Botones de acción -->79 <div class="buttons">80 <!-- El botón verde llama a la función addTwo() -->81 <button id="bottonSuma" onclick="addTwo()">+ 2</button>82 83 <!-- El botón rojo llama a la función subtractThree() -->84 <button id="bottonResta" onclick="subtractThree()">- 3</button>85 </div>86 87 </div>88 89 <script>90 // Inicializamos el contador en una variable global para que JavaScript pueda acceder a él.91 let contador = 0;92 const displayContador = document.getElementById('contador');93 94 /**95 * Función ejecutada al hacer clic en el botón verde (+2).96 */97 function addTwo() {98 // 1. Actualizar la variable JavaScript99 contador += 2;100 101 // 2. Actualizar el texto visible en el HTML102 displayContador.textContent = contador;103 104 // Opcional: Añadir un pequeño "rebote" visual al número para mejor UX105 const container = document.querySelector('.container');106 container.style.transition = 'transform 0.1s';107 container.style.transform = 'scale(1.02)';108 setTimeout(() => {109 container.style.transform = 'scale(1)';110 }, 100);111 }112 113 /**114 * Función ejecutada al hacer clic en el botón rojo (-3).115 */116 function subtractThree() {117 // 1. Actualizar la variable JavaScript118 contador -= 3;119 120 // 2. Actualizar el texto visible en el HTML121 displayContador.textContent = contador;122 123 // Opcional: Añadir un pequeño "rebote" visual al número para mejor UX124 const container = document.querySelector('.container');125 container.style.transition = 'transform 0.1s';126 container.style.transform = 'scale(1.02)';127 setTimeout(() => {128 container.style.transform = 'scale(1)';129 }, 100);130 }131 </script>132 133 </body>134 </html>135 Enlace
El enlace para compartir es: