Muchas veces queremos hacer un mantenimiento o algún ajustes en nuestro sitio web y debemos de colocar algún aviso indicando que nuestro sitio esta en mantenimiento y que pronto volveremos a estar online, podemos hacer una imagen diciendo que volveremos en breve o colocar algún texto para hacer este trabajo. Pero hay una opción muy buena para estos casos, es utilizar un plugin de Jquery llamado
jQuery Countdown desarrollado por
Keith Wood, este nos mostrara un contador en cuenta regresiva en texto indicando el tiempo que falta para volver.
El día de hoy vamos a hacer un ejercicio practico donde crearemos una pagina Coming Soon o volveremos en breve donde utilizaremos el plugin Jquery Countdown.
Esto es lo que conseguiremos:
El HTML
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
| <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Coming soon - tutosytips</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Rum+Raisin' rel='stylesheet' type='text/css'>
<script src="js/jquery.1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.countdown.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#countdown').countdown({until:$.countdown.UTCDate(11, 2013, 12 - 1, 29), format: 'DHMS', layout:
'<div id="timer">' +
'<div id="timer_days" class="timer_numbers">{dnn}</div>'+
'<div id="timer_hours" class="timer_numbers">{hnn}</div>'+
'<div id="timer_mins" class="timer_numbers">{mnn}</div>'+
'<div id="timer_seconds" class="timer_numbers">{snn}</div>'+
'</div>'
});
});
</script>
</head>
<body>
<div id="contenido">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div id="mensaje">
<h3>Estamos en mantenimiento, volvemos en breve.</h3>
<div id="countdown">
</div>
</div>
<ul class="redes-sociales">
<li><a href="#">facebook</a></li>
<li><a href="#">twitter</a></li>
<li><a href="#">linkedin</a></li>
<li><a href="#">google+</a></li>
<li><a href="#">youtube</a></li>
<li><a href="#">pinterest</a></li>
</ul>
</div>
</body>
</html>
|
Acá tenemos un documento html normal y básico, en la cabecera tenemos los estilos vinculados junto con un link a las fuentes de google donde utilizaremos la fuente
Rum Raisin y también tenemos los scripts que nos harán casi todo el trabajo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script src="js/jquery.1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.countdown.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#countdown').countdown({until:$.countdown.UTCDate(11, 2013, 12 - 1, 29), format: 'DHMS', layout:
'<div id="timer">' +
'<div id="timer_days" class="timer_numbers">{dnn}</div>'+
'<div id="timer_hours" class="timer_numbers">{hnn}</div>'+
'<div id="timer_mins" class="timer_numbers">{mnn}</div>'+
'<div id="timer_seconds" class="timer_numbers">{snn}</div>'+
'</div>'
});
});
</script>
|
Llamamos al archivo de jquery y el countdown que lo tenemos el los archivos locales en la carpeta js de nuestras carpetas y también utilizamos el script que nos generara dinámicamente los números del conteo, con sus respectivos id y una clase adicional para todos, entre ellos tenemos lo que se cargara dinámicamente, las variantes para cargar el numero de días, horas, minutos y segundos. Ahora esto se va a cargar en un div dentro del cuerpo del sitio y el div es el <div id=”countdown”> que se encuentra vacío en el body, aquí es donde se cargar el contenido dinámico.
Ahora vamos con los estilos.
Los CSS
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
| body {
background: url("../img/bg.jpg") repeat scroll 0 0 #7BCAEF;
margin: 0;
}
#mensaje {
background-color: rgba(255, 255, 255, 0.2);
border: 4px double #FFFFFF;
margin: 20px auto;
max-width: 800px;
overflow: hidden;
padding: 30px 0;
position: relative;
}
html body div#contenido div.logo {
margin: 10px auto 30px;
width: 280px;
}
#mensaje h3 {
color: #E6C217;
font-family: 'Rum Raisin',sans-serif !important;
font-size: 2.5em;
margin: 0;
text-align: center;
text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7), 0 -2px 0 rgba(255, 255, 255, 0.7);
}
.hasCountdown {
margin: 15px 0 0 111px;
}
#timer {
clear: both;
position: relative;
}
.timer_numbers {
color: #6395C4;
font-family: 'Rum Raisin',arial,helvetica,sans-serif;
font-size: 5em;
text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7), 0 -2px 0 rgba(255, 255, 255, 0.7);
}
#timer_days, #timer_hours, #timer_mins, #timer_seconds {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 80px 80px 80px 80px;
float: left;
height: 130px;
padding: 6px 23px 0;
text-align: center;
width: 90px;
}
#timer_days:after {
content: "Dias";
display: block;
font-family: arial;
font-size: 18px;
position: relative;
text-shadow: none;
top: -18px;
}
#timer_hours:after {
content: "Horas";
display: block;
font-family: arial;
font-size: 18px;
position: relative;
text-shadow: none;
top: -18px;
}
#timer_mins:after {
content: "Minutos";
display: block;
font-family: arial;
font-size: 18px;
position: relative;
text-shadow: none;
top: -18px;
}
#timer_seconds:after {
content: "Segundos";
display: block;
font-family: arial;
font-size: 18px;
position: relative;
text-shadow: none;
top: -18px;
}
ul.redes-sociales {
list-style-type: none;
margin: 0 auto;
width: 500px;
}
ul.redes-sociales li {
float: left;
margin: 10px;
}
ul.redes-sociales li a {
color: #D1EEF5;
font-family: helvetica,arial,serif;
text-decoration: none;
}
|
Con los estilos ajustamos la parte visual del documento, son estilos básicos donde damos imagen de background, utilizamos fuentes de Google, colores con alfa y speudo-elementos, la posición de los números se generan que se generan dinámicamente esta aplicado el estilo .timer_numbers y las letras de días, horas, minutos, segundo las generamos con Css, utilizamos el pseudo-elemento :after, y lo ubicamos debajo de las letras, y por ultimos aplicamos estilos para los links de las redes sociales.
Nota: Para modificar el tiempo de espera lo debemos de hacer en el script del <head> en la linea 16, ahi damos el tiempo adecuado y necesitado (DHMS) dias, horas, minutos y segundos.
1
| $('#countdown').countdown({until:$.countdown.UTCDate(11, 2013, 12 - 1, 29), format: 'DHMS', layout:
|
Y esto es todo, espero que te sirva de algo este ejercicio, nos vemos en el siguiente.
Créditos: TutosyTips.net
Linkback: https://minecraftmin.net/index.php?topic=3368.0
Conectarse
Registrarse
Inicio
Ayuda
MinClub
Share Topic
Tema: [Jquery] Página Coming Soon con cuenta atras (Leído 3364 veces)
Abril 01, 2019, 04:44:48 am