Foros del Web » Programando para Internet » Javascript »

Redireccionar cuando CountDown llega a cero

Estas en el tema de Redireccionar cuando CountDown llega a cero en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/07/2012, 09:12
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 15 años, 6 meses
Puntos: 0
Pregunta 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);
  #2 (permalink)  
Antiguo 04/07/2012, 10:05
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: Redireccionar cuando CountDown llega a cero

simplemente evalúas cuando llegue a 0 y usas window.open('url') o window.location= 'url'
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 04/07/2012, 11:51
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Redireccionar cuando CountDown llega a cero

Cita:
Iniciado por maycolalvarez Ver Mensaje
simplemente evalúas cuando llegue a 0 y usas window.open('url') o window.location= 'url'
Hola! el tema es que no conozco mucho de JS como me tirarias un punta para poder lograrlo. o tendrias algun codigo de ejemplo?

Muchas gracias!
  #4 (permalink)  
Antiguo 09/05/2013, 18:10
 
Fecha de Ingreso: mayo-2013
Mensajes: 1
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Redireccionar cuando CountDown llega a cero

redireccion a otra pagina al terminar la cuenta atras

<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': 0,
'sec': 5
},
// onComplete function
onComplete: function() { (window.location= 'http://tupaginaweb')}
});
});

$('#email_field').focus(email_focus).blur(email_bl ur);
$('#subscribe_form').bind('submit', function() { return false; });
</script>

Etiquetas: countdown, cronometro, redireccionar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:27.