Código de JavaScript - Cuenta atras hasta una fecha

Imágen de perfil

Cuenta atras hasta una fechagráfica de visualizaciones


JavaScript

Actualizado el 9 de Julio del 2020 por Administrador (703 códigos) (Publicado el 19 de Noviembre del 2006)
30.977 visualizaciones desde el 19 de Noviembre del 2006
Código que muestra la cuenta atras hasta una fecha determinada.

tiempo-restante-hasta-una-fecha-dada-javascript

Versión 1
estrellaestrellaestrellaestrellaestrella(9)

Publicado el 19 de Noviembre del 2006gráfica de visualizaciones de la versión: Versión 1
28.907 visualizaciones desde el 19 de Noviembre del 2006

Versión 2

Publicado el 9 de Julio del 2020gráfica de visualizaciones de la versión: Versión 2
2.071 visualizaciones desde el 9 de Julio del 2020
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
 
    <style>
    input
    {
        font-family: Verdana;
        font-size: 12;
        color: #ffffff;
        border-width: 0;
        background-color: #000077;
        text-align: right;
        padding:5px;
        margin-bottom:1px;
    }
    </style>
 
</head>
 
<body>
 
<!--formulario deshabilitado donde se muestran los datos-->
<form name="form">
    <div></div><br>
    <input type="text" size="5" name="year" disabled> años<br>
    <input type="text" size="5" name="month" disabled> meses<br>
    <input type="text" size="5" name="day" disabled> dias<br>
    <input type="text" size="5" name="hour" disabled> horas<br>
    <input type="text" size="5" name="minute" disabled> minutos<br>
    <input type="text" size="5" name="second" disabled> segundos<br>
</form>
 
</body>
</html>
 
<script>
//Codigo que muestra la cuenta atras hasta el final del año 2010
//La Web del Programador
//http://www.lawebdelprogramador.com
 
(function(){
    //variables que determinan la fecha y hora final de la cuenta atras
    let toYear=2025;
    let toMonth=7;
    let toDay=9;
    let toHour=21;
    let toMinute=0;
    let toSecond=0;
 
    const fillZero = i => i.toString().length==1 ? "0"+i : i;
 
    document.querySelector("form>div").innerHTML=`Tiempo restante hasta el ${fillZero(toDay)}-${fillZero(toMonth)}-${toYear} ${fillZero(toHour)}:${fillZero(toMinute)}:${fillZero(toSecond)}`;
    function countDown()
    {
        const actual_date=new Date();
 
        let new_second=toSecond-actual_date.getSeconds();
        let new_minute=toMinute-actual_date.getMinutes();
        let new_hour=toHour-actual_date.getHours();
        let new_day=toDay-actual_date.getDate();
        let new_month=toMonth-(1+actual_date.getMonth());
        let new_year=toYear-actual_date.getFullYear();
 
        if (new_second<0) {
            new_second=60+new_second;
            new_minute--;
        }
        if (new_minute<0) {
            new_minute=60+new_minute;
            new_hour--;
        }
        if (new_hour<0) {
            new_hour=24+new_hour;
            new_day--;
        }
        if (new_day<0) {
            new_month--;
            let m=actual_date.getMonth();
            if (m in [0, 2, 4, 6, 7, 9, 11]) {
                new_day=31+new_day;
            }
            if (m in [3, 5, 8, 10]) {
                new_day=30+new_day;
            }
            if (m==1) { //febrero
                //comprobamos si es un año bisiesto...
                if (actual_date.getYear()/4-Math.floor(actual_date.getYear()/4)==0) {
                    actual_date=29+actual_date;
                } else {
                    actual_date=28+actual_date;
                }
            }
        }
        if (new_month<0) {
            new_month=12+new_month;
            new_year--;
        }
        if (new_year<0) {
            clearInterval(interval);
            return;
        }
 
        form.second.value=fillZero(new_second);
        form.minute.value=fillZero(new_minute);
        form.hour.value=fillZero(new_hour);
        form.day.value=new_day;
        form.month.value=new_month;
        form.year.value=new_year;
    }
 
    let interval=setInterval(countDown, 1000);
})();
</script>



Comentarios sobre la versión: Versión 2 (0)


No hay comentarios
 

Comentar la versión: Versión 2

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s1430