Scribd Logo
Upload

Welcome to Scribd!

  • Codigo Contador Regresivo de Tiempo

    Uploaded by

    Jazmín Abrille Illanes Ramón
    4 views3 pages
    INVITACIONES PARA CUMPLEAÑOS

    Original Title

    codigo contador regresivo de tiempo

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    INVITACIONES PARA CUMPLEAÑOS

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    4 views3 pages

    Codigo Contador Regresivo de Tiempo

    Uploaded by

    Jazmín Abrille Illanes Ramón
    INVITACIONES PARA CUMPLEAÑOS

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 3

    <!

    doctype html>
    <html lang="es">

    <style type="text/css">
    body {
    overflow:hidden;
    }
    </style>

    <style>

    td {border-style: solid;
    border-color: #cccccc;
    border-width: 0px;

    color: #FFB7E9; /* Cambia Color Aqui */

    padding: 0px;
    font-size: 30px;
    font-family: Arial;
    text-align: center;}

    th {
    border-width: 0px;

    color: #000000; /* Cambia Color Aqui */

    text-align: center;
    padding: 0px;
    font-size: 15px;
    font-family: Times New Roman;}

    </style>

    <body>

    <!-- Contador regresivo -->


    <section>

    <table align="center" width="90%">


    <tr>
    <td><span id="days"></span></td>
    <td><span id="hours"></th>
    <td><span id="minutes"></span></td>
    <td><span id="seconds"></span></td>
    </tr>
    <tr >
    <th>Días</th>
    <th>Horas</th>
    <th>Minutos</th>
    <th>Segundos</th>
    </tr>
    </table>

    </section>
    <!-- Fin contador regresivo -->

    <script>
    document.addEventListener('DOMContentLoaded', () => {

    //===
    // VARIABLES Cambia la fecha aquí del evento
    //=== Mes - Dia -Año ===//

    const DATE_TARGET = new Date('03/30/2024 06:30 PM');

    // DOM for render


    const SPAN_DAYS = document.querySelector('span#days');
    const SPAN_HOURS = document.querySelector('span#hours');
    const SPAN_MINUTES = document.querySelector('span#minutes');
    const SPAN_SECONDS = document.querySelector('span#seconds');
    // Milliseconds for the calculations
    const MILLISECONDS_OF_A_SECOND = 1000;
    const MILLISECONDS_OF_A_MINUTE = MILLISECONDS_OF_A_SECOND * 60;
    const MILLISECONDS_OF_A_HOUR = MILLISECONDS_OF_A_MINUTE * 60;
    const MILLISECONDS_OF_A_DAY = MILLISECONDS_OF_A_HOUR * 24

    //===
    // FUNCTIONS
    //===

    /**
    * Method that updates the countdown and the sample
    */
    function updateCountdown() {
    // Calcs
    const NOW = new Date()
    const DURATION = DATE_TARGET - NOW;
    const REMAINING_DAYS = Math.floor(DURATION / MILLISECONDS_OF_A_DAY);
    const REMAINING_HOURS = Math.floor((DURATION % MILLISECONDS_OF_A_DAY) /
    MILLISECONDS_OF_A_HOUR);
    const REMAINING_MINUTES = Math.floor((DURATION %
    MILLISECONDS_OF_A_HOUR) / MILLISECONDS_OF_A_MINUTE);
    const REMAINING_SECONDS = Math.floor((DURATION %
    MILLISECONDS_OF_A_MINUTE) / MILLISECONDS_OF_A_SECOND);

    // Render
    SPAN_DAYS.textContent = REMAINING_DAYS;
    SPAN_HOURS.textContent = REMAINING_HOURS;
    SPAN_MINUTES.textContent = REMAINING_MINUTES;
    SPAN_SECONDS.textContent = REMAINING_SECONDS;
    }

    //===
    // INIT
    //===
    updateCountdown();
    // Refresh every second
    setInterval(updateCountdown, MILLISECONDS_OF_A_SECOND);
    });
    </script>
    </body>
    </html>

    You might also like