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 Simple</title>7 <style>8 /* Estilos para que la página se vea bonita */9 body {10 font-family: Arial, sans-serif;11 display: flex;12 justify-content: center;13 align-items: center;14 height: 100vh;15 margin: 0;16 background-color: #f0f0f0;17 }18 19 .container {20 text-align: center;21 background: white;22 padding: 50px;23 border-radius: 15px;24 box-shadow: 0 4px 10px rgba(0,0,0,0.1);25 }26 27 h1 {28 color: #333;29 }30 31 #contador {32 font-size: 80px;33 margin: 20px 0;34 font-weight: bold;35 }36 37 button {38 font-size: 18px;39 padding: 15px 25px;40 margin: 10px;41 border: none;42 border-radius: 5px;43 cursor: pointer;44 transition: transform 0.1s, opacity 0.2s;45 }46 47 button:active {48 transform: scale(0.95);49 }50 51 .btn-suma {52 background-color: #28a745;53 color: white;54 }55 56 .btn-resta {57 background-color: #dc3545;58 color: white;59 }60 61 button:hover {62 opacity: 0.9;63 }64 </style>65 </head>66 <body>67 68 <div class="container">69 <h1>Contador</h1>70 <div id="contador">0</div>71 <div>72 <button class="btn-suma" onclick="sumarDos()">Sumar 2</button>73 <button class="btn-resta" onclick="restarTres()">Restar 3</button>74 </div>75 </div>76 77 <script>78 // Variable que guarda el número actual79 let cuenta = 0;80 81 // Seleccionamos el elemento donde se muestra el número82 const displayContador = document.getElementById('contador');83 84 // Función para sumar 285 function sumarDos() {86 cuenta += 2;87 actualizarPantalla();88 }89 90 // Función para restar 391 function restarTres() {92 cuenta -= 3;93 actualizarPantalla();94 }95 96 // Función para actualizar el texto en el HTML97 function actualizarPantalla() {98 displayContador.innerText = cuenta;99 }100 </script>101 102 </body>103 </html>104 Enlace
El enlace para compartir es: