sep
2
Cuenta atras presentación página
Leave a comment »
Este codigo crea una cuanta atras para la presentación de una nueva web, o un nuevo apartado dentro de una web existente.
countdown jquery
El codigo es el siguiente:
Empezaremos por el css:
Este es el del fichero: jquery.countdown.css
/* jQuery Countdown styles 1.5.5. */
.hasCountdown {
/*border: 1px solid #ccc;
background-color: #eee;*/
}
.countdown_rtl {
direction: rtl;
}
.countdown_holding span {
background-color: #ccc;
}
.countdown_row {
clear: both;
width: 100%;
padding: 0px 2px;
text-align: center;
}
.countdown_show1 .countdown_section {
width: 300px;
}
.countdown_show2 .countdown_section {
width: 48%;
}
.countdown_show3 .countdown_section {
width: 32.5%;
}
.countdown_show4 .countdown_section {
width: 24.5%;
}
.countdown_show5 .countdown_section {
width: 19.5%;
}
.countdown_show6 .countdown_section {
width: 16.25%;
}
.countdown_show7 .countdown_section {
width: 14%;
}
.countdown_section {
display: block;
float: left;
font-size: 75%;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
}
.countdown_amount {
font-size: 200%;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
}
.countdown_descr {
display: block;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
}
Este es el de la capa que contiene el contador:
#date {
width:300px;
margin-top: 20px;
margin-bottom: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
color: #FFF;
}
Ahora paso a mostrar el codigo html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>::.:: Counte atras countdown ::.::</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown-es.js"></script>
<script type="text/javascript">
$(function () {
$('#defaultCountdown').countdown({until: new Date(2010, 10 - 1, 25)});
});
</script>
</head>
<body bgcolor="#fff">
<div id="date">
<div id="defaultCountdown"></div>
</div>
</body>
</html>
Codigo jquery para activar la fecha final de la cuenta atras:
$(function () {
$('#defaultCountdown').countdown({until: new Date(2010, 10 - 1, 25)});
});
Donde en new Date le indicaremos la fecha.
Ahora veremos los ficheros con la programación de jquery:
La traducción a Castellano la hizo Sergio Carracedo y la traducción a Gallego Moncho Pena. Os dejo la de Castellano
/* http://keith-wood.name/countdown.html
* Spanish initialisation for the jQuery countdown extension
* Written by Sergio Carracedo Martinez webmaster@neodisenoweb.com (2008) */
(function($) {
$.countdown.regional['es'] = {
labels: ['Años', 'Meses', 'Semanas', 'Dias', 'Horas', 'Minutos', 'Segundos'],
labels1: ['Años', 'Meses', 'Semanas', 'Dias', 'Horas', 'Minutos', 'Segundos'],
compactLabels: ['a', 'm', 's', 'g'],
timeSeparator: ':', isRTL: false};
$.countdown.setDefaults($.countdown.regional['es']);
})(jQuery);
El resto de ficheros los podeis encontrar en la web del autor que es la siguiente: http://keith-wood.name/countdown.html