04/07/2012, 09:12
|
| | | Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 16 años, 2 meses Puntos: 0 | |
 Redireccionar cuando CountDown llega a cero
Hola, tengo un cronometro que funciona de forma regresiva. Lo que necesito hacer es que al momento de que el crono llegue a cero me redireccione a una URL especifica.
Dejo los codigo HTML, y el JS.
Desde ya muchas gracias a quien pueda ayudarme!!! 
EL HTML Código HTML: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="example_start_stop.css"></link>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.lwtCountdown-1.0.js"></script>
<style type="text/css">
<!--
body {
background-color: #000000;}
.Estilo1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;}
-->
</style>
<title>Cronometro</title></head>
<body onLoad="stop()">
<!-- example start/stop -->
<!-- END example start/stop -->
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</div>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-289748-9");
pageTracker._trackPageview();
} catch(err) {}</script>
<table width="420" border="0">
<tr>
<td width="755"><div class="example_pane">
<div id="countdown_dashboard">
<div class="dash minutes_dash">
<div align="center"><span class="dash_title Estilo1">MINUTOS</span> </div>
<div class="digit">
<div align="center">0</div>
</div>
<div class="digit">
<div align="center">0</div>
</div>
</div>
<div class="dash seconds_dash">
<div align="center"><span class="dash_title Estilo1">SEGUNDOS</span> </div>
<div class="digit">
<div align="center">0</div>
</div>
<div class="digit">
<div align="center">0</div>
</div>
</div>
</div>
<div align="center">
<script language="JavaScript" type="text/javascript">
// Set the Countdown
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 25,
'sec': 0
}
});
});
// Stop countdown
function stop() {
$('#countdown_dashboard').stopCountDown();
}
// Start countdown
function start() {
$('#countdown_dashboard').startCountDown();
}
// reset and start
function reset() {
$('#countdown_dashboard').stopCountDown();
$('#countdown_dashboard').setCountDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 25,
'sec': 0
}
});
$('#countdown_dashboard').startCountDown();
}
function reset10() {
$('#countdown_dashboard').stopCountDown();
$('#countdown_dashboard').setCountDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 10,
'sec': 0
}
});
$('#countdown_dashboard').startCountDown();
}
function reset5() {
$('#countdown_dashboard').stopCountDown();
$('#countdown_dashboard').setCountDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 5,
'sec': 0
}
});
$('#countdown_dashboard').startCountDown();
}
function reset15() {
$('#countdown_dashboard').stopCountDown();
$('#countdown_dashboard').setCountDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 15,
'sec': 0
}
});
$('#countdown_dashboard').startCountDown();
}
function reset20() {
$('#countdown_dashboard').stopCountDown();
$('#countdown_dashboard').setCountDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 20,
'sec': 0
}
});
$('#countdown_dashboard').startCountDown();
}
</script>
</div>
</div></td>
</tr>
<tr>
<td><div align="LEFT"><br />
<button onClick="stop()"><span class="digit"><strong>Pausa</strong></span></button>
<button onClick="start()"><span class="digit"><strong>Comenzar/Reanudar</strong></span></button><br>
<button class="digit " onClick="reset()">25 min</button>
<button class="digit" onClick="reset20()">20 min</button>
<button class="digit" onClick="reset15()">15 min</button>
<button class="digit" onClick="reset10()">10 min</button>
<button class="digit" onClick="reset5()">5 min</button>
</div>
<div align="center"></div></td>
</tr>
</table>
</body>
</html> EL JS
Código:
(function($){
$.fn.countDown = function (options) {
config = {};
$.extend(config, options);
diffSecs = this.setCountDown(config);
if (config.onComplete)
{
$.data($(this)[0], 'callback', config.onComplete);
}
if (config.omitWeeks)
{
$.data($(this)[0], 'omitWeeks', config.omitWeeks);
}
$('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
$(this).doCountDown($(this).attr('id'), diffSecs, 500);
return this;
};
$.fn.stopCountDown = function () {
clearTimeout($.data(this[0], 'timer'));
};
$.fn.startCountDown = function () {
this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
};
$.fn.setCountDown = function (options) {
var targetTime = new Date();
if (options.targetDate)
{
targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));
}
else if (options.targetOffset)
{
targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
targetTime.setDate(options.targetOffset.day + targetTime.getDate());
targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
}
var nowTime = new Date();
diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);
$.data(this[0], 'diffSecs', diffSecs);
return diffSecs;
};
$.fn.doCountDown = function (id, diffSecs, duration) {
$this = $('#' + id);
if (diffSecs <= 0)
{
diffSecs = 0;
if ($.data($this[0], 'timer'))
{
clearTimeout($.data($this[0], 'timer'));
}
}
secs = diffSecs % 60;
mins = Math.floor(diffSecs/60)%60;
hours = Math.floor(diffSecs/60/60)%24;
if ($.data($this[0], 'omitWeeks') == true)
{
days = Math.floor(diffSecs/60/60/24);
weeks = Math.floor(diffSecs/60/60/24/7);
}
else
{
days = Math.floor(diffSecs/60/60/24)%7;
weeks = Math.floor(diffSecs/60/60/24/7);
}
$this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
$this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
$this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
$this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
$this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);
$.data($this[0], 'diffSecs', diffSecs);
if (diffSecs > 0)
{
e = $this;
t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
$.data(e[0], 'timer', t);
}
else if (cb = $.data($this[0], 'callback'))
{
$.data($this[0], 'callback')();
}
};
$.fn.dashChangeTo = function(id, dash, n, duration) {
$this = $('#' + id);
for (var i=($this.find('.' + dash + ' .digit').length-1); i>=0; i--)
{
var d = n%10;
n = (n - d) / 10;
$this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:eq('+i+')', d, duration);
}
};
$.fn.digitChangeTo = function (digit, n, duration) {
if (!duration)
{
duration = 800;
}
if ($(digit + ' div.top').html() != n + '')
{
$(digit + ' div.top').css({'display': 'none'});
$(digit + ' div.top').html((n ? n : '0')).slideDown(duration);
$(digit + ' div.bottom').animate({'height': ''}, duration, function() {
$(digit + ' div.bottom').html($(digit + ' div.top').html());
$(digit + ' div.bottom').css({'display': 'block', 'height': ''});
$(digit + ' div.top').hide().slideUp(10);
});
}
};
})(jQuery);
|