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 con Botones</title>7 <style>8 body {9 display: flex;10 justify-content: center;11 align-items: center;12 min-height: 100vh;13 margin: 0;14 font-family: Arial, sans-serif;15 }16 17 .contador-container {18 text-align: center;19 padding: 40px;20 border-radius: 15px;21 box-shadow: 0 4px 8px rgba(0,0,0,0.2);22 background-color: #f0f0f0;23 }24 25 h1 {26 color: #333;27 margin-bottom: 20px;28 }29 30 .contador {31 font-size: 6rem;32 font-weight: bold;33 color: #444;34 margin: 30px 0;35 }36 37 button {38 padding: 15px 30px;39 font-size: 1.2rem;40 border: none;41 border-radius: 8px;42 cursor: pointer;43 transition: transform 0.2s, box-shadow 0.2s;44 margin: 10px;45 }46 47 button:hover {48 transform: scale(1.05);49 box-shadow: 0 6px 12px rgba(0,0,0,0.3);50 }51 52 .btn-green {53 background-color: #4CAF50; /* Verde */54 color: white;55 }56 57 .btn-red {58 background-color: #f44336; /* Rojo */59 color: white;60 }61 </style>62 </head>63 <body>64 <div class="contador-container">65 <h1>Contador Interactivo</h1>66 <div class="contador" id="contador">0</div>67 <button class="btn-green" onclick="sumar()">+</button>68 <button class="btn-red" onclick="restar()">-</button>69 </div>70 71 <script>72 let contador = 0;73 const display = document.getElementById('contador');74 75 function sumar() {76 contador += 2;77 actualizar();78 }79 80 function restar() {81 contador -= 3;82 actualizar();83 }84 85 function actualizar() {86 // Evitar números negativos87 if (contador < 0) {88 alert("¡El contador no puede ser negativo!");89 contador = 0; // Restablecer a cero si es negativo90 }91 92 display.textContent = contador;93 }94 95 // Inicializar el contador96 actualizar();97 </script>98 </body>99 </html>100 Enlace
El enlace para compartir es: