hora internacional

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Hora en Seis Países</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f2f2f2;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        .reloj {
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            display: inline-block;
            width: 300px;
        }
        .pais {
            font-size: 1.5em;
            margin-bottom: 10px;
            color: #555;
        }
        .hora {
            font-size: 2em;
            color: #222;
        }
    </style>
</head>
<body>
    <h1>Hora Actual en Seis Países</h1>

    <div class="reloj">
        <div class="pais">Argentina (Buenos Aires)</div>
        <div class="hora" id="arg"></div>
    </div>

    <div class="reloj">
        <div class="pais">España (Madrid)</div>
        <div class="hora" id="esp"></div>
    </div>

    <div class="reloj">
        <div class="pais">México (CDMX)</div>
        <div class="hora" id="mex"></div>
    </div>

    <div class="reloj">
        <div class="pais">Estados Unidos (Nueva York)</div>
        <div class="hora" id="usa"></div>
    </div>

    <div class="reloj">
        <div class="pais">Japón (Tokio)</div>
        <div class="hora" id="jpn"></div>
    </div>

    <div class="reloj">
        <div class="pais">Reino Unido (Londres)</div>
        <div class="hora" id="uk"></div>
    </div>

    <script>
        function actualizarHoras() {
            const opciones = { hour: '2-digit', minute: '2-digit', second: '2-digit' };

            const ahoraARG = new Date().toLocaleTimeString('es-AR', { ...opciones, timeZone: 'America/Argentina/Buenos_Aires' });
            const ahoraESP = new Date().toLocaleTimeString('es-ES', { ...opciones, timeZone: 'Europe/Madrid' });
            const ahoraMEX = new Date().toLocaleTimeString('es-MX', { ...opciones, timeZone: 'America/Mexico_City' });
            const ahoraUSA = new Date().toLocaleTimeString('en-US', { ...opciones, timeZone: 'America/New_York' });
            const ahoraJPN = new Date().toLocaleTimeString('ja-JP', { ...opciones, timeZone: 'Asia/Tokyo' });
            const ahoraUK = new Date().toLocaleTimeString('en-GB', { ...opciones, timeZone: 'Europe/London' });

            document.getElementById('arg').textContent = ahoraARG;
            document.getElementById('esp').textContent = ahoraESP;
            document.getElementById('mex').textContent = ahoraMEX;
            document.getElementById('usa').textContent = ahoraUSA;
            document.getElementById('jpn').textContent = ahoraJPN;
            document.getElementById('uk').textContent = ahoraUK;
        }

        actualizarHoras();
        setInterval(actualizarHoras, 1000);
    </script>
</body>
</html>