Foros del Web » Creando para Internet » HTML »

Necesito un contador de minutos y segundos

 Estas en el tema de Necesito un contador de minutos y segundos en el foro de HTML en Foros del Web. HOlaaaa!! Bueno gente necesito un contador de tiempo (minutos y segundos nada mas) para mi web.. La idea es que cuente en el contador de ...
  #1 (permalink)  
Antiguo 26/02/2011, 18:51
 
Fecha de Ingreso: febrero-2011
Mensajes: 8
Antigüedad: 13 años, 10 meses
Puntos: 0
Necesito un contador de minutos y segundos
HOlaaaa!! Bueno gente necesito un contador de tiempo (minutos y segundos nada mas) para mi web.. La idea es que cuente en el contador de minutos y segundos, y ademas que valla a la par del tiempo real y que cuando se actualize la pagina siga contando.. se entiende?? jaj. para ampliar mas lo necesito para contar el tiempo de un partido de futbol.. Bueno desde ya muchas gracias!!!!!
  #2 (permalink)  
Antiguo 27/02/2011, 08:03
 
Fecha de Ingreso: febrero-2011
Ubicación: define ('Ubicación', 'Mi_casa');
Mensajes: 21
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Necesito un contador de minutos y segundos
Hola!!
Mira aquí tienes un ejemplo para el del contador de tiempo usando un sencillo cronómetro usando javascript y html :

Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2. var time; var on = false; var seconds = 0; var minutes = 0;
  3.  
  4. var startTime = function(){
  5.         seconds++;
  6.         time = setTimeout("startTime()",1000);
  7.         if(seconds > 59)  {seconds = 0; minutes++;}
  8.         document.getElementById("minutes").value = minutes;
  9.         // Mostar segundos
  10.         document.getElementById("seconds").value = seconds;
  11.         // Mostar segundos
  12. }
  13.  
  14. var stopStart = function(){
  15.         document.getElementById("time").innerHTML = !on ? "Stop" : "Start";
  16.         if(!on){
  17.             on = true;  startTime();
  18.         }else{
  19.             on = false; clearTimeout(time);
  20.         }
  21. }
  22. </script>
  23.  
  24. <button onClick="stopStart()" id="time">Start</button>
  25. <input type="text" id="minutes" value="0" />
  26. <!-- //Aquí los minutos -->
  27. <input type="text" id="seconds" value="0" />
  28. <!-- // Aquí los segundos -->

Esto lo pones en el body de la página que tu quieras. También podrías hacer un iframe y así incluyes el código con más facilidad o podrás modificarlo de forma que lo controles tú.

Saludos!!
  #3 (permalink)  
Antiguo 28/02/2011, 05:58
 
Fecha de Ingreso: febrero-2011
Mensajes: 8
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Necesito un contador de minutos y segundos
Gracias por responder, la idea es esa pero necesito que arranque solo y que cuando se actualice la pagina que no vuelva a 0 sino que continúe contando...
  #4 (permalink)  
Antiguo 28/02/2011, 19:25
 
Fecha de Ingreso: febrero-2011
Mensajes: 8
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Necesito un contador de minutos y segundos
<head>
<script type="text/javascript" language="javascript">



<!--a cada funcion le puse el numero de ID para que el cliente pueda incluir mas de un mam en su web y que no se pisen las funciones del relojito-->

function getSegundos89027(dato){

fecha = Math.floor(dato / 1000000);

fecha2 = Math.floor(dato / 10000);

hh = Math.floor((dato / 10000) - fecha * 100);

mm = Math.floor((dato / 100) - fecha2 * 100);

ss = Math.floor(dato % 100);



return 3600 * hh + 60 * mm + ss;

}



function getDia89027(dato){

fecha = Math.floor(dato / 100000000);

dia = Math.floor((dato / 1000000) - fecha * 100);

return dia;

}



function getFecha89027(dato){

fecha = Math.floor(dato / 1000000);

return fecha;

}



function getSegundosFecha89027(fecha) {

return 3600 * fecha.getHours() + 60 * fecha.getMinutes() + fecha.getSeconds();

}



function setMinutos89027(tiempo){

return Math.floor(tiempo / 60);

}

function setSegundos89027(tiempo){

return tiempo % 60;

}



var horainiciocliente89027 = getSegundosFecha89027(new Date());



function actualizarTiempo89027(ahoraserver,horacomienzo){

var ahoracliente = getSegundosFecha89027(new Date());



if (getDia89027(horacomienzo) == getDia89027(ahoraserver)) {

var tiempojuego = (getSegundos89027(ahoraserver) - getSegundos89027(horacomienzo)) + (ahoracliente - horainiciocliente89027);

} else {

var tiempojuego = (getSegundos89027(ahoraserver) + (getSegundos89027(getFecha89027(horacomienzo)+'240 000') - getSegundos89027(horacomienzo))) + (ahoracliente - horainiciocliente89027);

}

return tiempojuego;

}



var contadorminutos89027 = null;



function escribeTiempo89027(tiemposerver ,horainicio,eldiv) {

contadorminutos89027 = document.getElementById(eldiv);

var transcurrido = actualizarTiempo89027(tiemposerver, horainicio);

if (transcurrido >= 0) {

minutos = setMinutos89027(transcurrido);

segundos = setSegundos89027(transcurrido) <= 9 ? "0" + setSegundos89027(transcurrido) : setSegundos89027(transcurrido);

if(minutos <= 55){

contadorminutos89027.innerHTML = minutos + ":" + segundos;

setTimeout('escribeTiempo89027(' + tiemposerver + ',' + horainicio + ',"' + eldiv + '")',1000);

}else{

contadorminutos89027.innerHTML= "-";

}

} else {

contadorminutos89027.innerHTML= "--:--";

}

}



function actualizarTiempoRefresh89027(lapso){

var ahoracliente = getSegundosFecha89027(new Date());

var tiempotranscurrido = lapso - (ahoracliente - horainiciocliente89027);

return tiempotranscurrido;

}



function refreshpagina89027(tiemporefresh,timer,eldiv) {

contadorminutos89027 = document.getElementById(eldiv);

var transcurrido = actualizarTiempoRefresh89027(tiemporefresh);

if (timer == 'on'){

if (transcurrido >= 1) {

minutos = setMinutos89027(transcurrido) <= 9 ? "0" + setMinutos89027(transcurrido) :setMinutos89027(transcurrido);

segundos = setSegundos89027(transcurrido) <= 9 ? "0" + setSegundos89027(transcurrido) : setSegundos89027(transcurrido);

if (minutos >= 1){

contadorminutos89027.innerHTML = minutos + ":" + segundos;

} else {

contadorminutos89027.innerHTML = "00:" + segundos;

}

setTimeout('refreshpagina89027(' + tiemporefresh + ',"' + timer + '","' + eldiv + '")',1000);

} else {

window.location.href = window.location.pathname;

}

}

}



function refreshpaginasincontador89027(tiemporefresh,timer) {

var transcurrido = actualizarTiempoRefresh89027(tiemporefresh);

if (timer == 'on' && tiemporefresh > 0){

if (transcurrido >= 1) {

segundos = setSegundos89027(transcurrido) <= 9 ? "0" + setSegundos89027(transcurrido) : setSegundos89027(transcurrido);

setTimeout('refreshpaginasincontador89027(' + tiemporefresh + ',"' + timer + '")',1000);

} else {

window.location.href = window.location.pathname;

}

}

}

function openWindowScrolls(url,width,height){

window.open(url,'','resizable=1,toolbar=0,location =0,directories=0,status=0,menubar=0,scrollbars=1,w idth='+width+',height='+height);

}



</script>










<script type="text/javascript">
var fechaLastInc = '00:00';
var htmlBox = "<div><div class=\"clearfixmin bb-md bb-md-en_vivo-small\" id=\"divMamBoxPartidoIDclausura201127\"> <div class=\"bd\"><h3>EN VIVO</h3><div class=\"result\">
<p class=\"team\">TIG</p>
<p class=\"number\">1</p>
<p class=\"team\">NEW</p>
<p class=\"number\">0</p>
</div>
</div> <div class=\"ft clearfix\">
<em class=\"blk\"> PT <span id=\"divMamBoxMarqueeTimerConainerclausura201127\" ></span>
<span style=\"display:none;\" id=\"divMamBoxMarqueeTimerclausura201127\">Februar y 28, 2011 21:19:04</span> | 3ra Fecha
</div></div><script type=\"text/javascript\" src=\"http://www.ole.com.ar/mam3/clausura2011/js/mamSmall27.js\"></script></div>";

if(document.getElementById("divMamBoxPartidoIDclau sura2011"+27)){
var div = document.getElementById("divMamBoxPartidoIDclausur a2011"+27).parentNode;
div.innerHTML=htmlBox;
//if(div.parentNode)
// div.parentNode.innerHTML = div.innerHTML;

}
else{
document.write(htmlBox);
}

mamUpdateTimerclausura2011(27);

window.setTimeout("mamReloadMatchclausura2011(27); ", 45000);
if(window.MAMintervalclausura201127)
window.clearInterval(window.MAMintervalclausura201 127);
MAMintervalclausura201127 = window.setInterval("mamUpdateTimerclausura2011(27) ",500);

function mamUpdateTimerclausura2011(id){
var horaEstado;
if(document.getElementById("divMamBoxMarqueeTimerc lausura2011"+id))
horaEstado = document.getElementById("divMamBoxMarqueeTimerclau sura2011"+id).innerHTML;
if(horaEstado){
var diff = new Date(new Date()-new Date(horaEstado));
var minutes = diff.getMinutes();
var seconds = diff.getSeconds();
seconds = (seconds<10)?"0"+seconds:seconds;
minutes = (minutes<10)?"0"+minutes:minutes;
var time = (minutes+":"+seconds);
document.getElementById("divMamBoxMarqueeTimerCona inerclausura2011"+id).innerHTML=time;
}

}

function mamReloadMatchclausura2011(id){
if($("#divMamBoxMarqueeclausura2011"+id)){
$("#divMamBoxMarqueeclausura2011"+id).fadeOut(1000 , function(){
var sr = document.createElement("script");
sr.setAttribute("type","text/javascript");
sr.setAttribute("src","http://www.ole.com.ar/mam3/clausura2011/js/mamSmall"+id+".js");
document.getElementById("divMamBoxPartidoIDclausur a2011"+id).appendChild(sr);
});
}
}
</script></head>


<div class="clearfixmin bb-md bb-md-en_vivo-small" id="divMamBoxPartidoIDclausura201127">
<div class="bd">
<h3>EN VIVO</h3>
<div class="result">
<p class="team">TIG</p>
<p class="number">0</p>
<p class="team">NEW</p>
<p class="number">0</p>
</div>
</div>
<div class="ft clearfix">
<em class="blk"> PT <span id="divMamBoxMarqueeTimerConainerclausura201127"> </span>
<span style="display:none;" id="divMamBoxMarqueeTimerclausura201127">February 28, 2011 21:19:04</span> | 3ra Fecha
</div>
</div>

<script type="text/javascript" src="http://www.ole.com.ar/mam3/clausura2011/js/mamSmall27.js"></script>
</div>
</div>



si se fijan ahi aparece mas o menos lo que necesito.. Soy medio novato en esto.. jaj
  #5 (permalink)  
Antiguo 04/03/2011, 08:34
 
Fecha de Ingreso: febrero-2011
Ubicación: define ('Ubicación', 'Mi_casa');
Mensajes: 21
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Necesito un contador de minutos y segundos
Hola, perdón por el retraso, tenía cosas que hacer (estudiar para el instituto, que tenía muchos exámenes). Creo que ya tengo la solución.

Primero:
Crea un archivo PHP (si no sabes lo que es, métete [URL="http://es.wikipedia.org/wiki/PHP"]aquí[/URL] )

Segundo:

En su contenido pega este código :

Código PHP:
<?php
$dateFrom = date("d-m-Y H:i:s", strtotime('now'));
$dateTo = "XX-XX-XXXX XX:XX:XX";//(Dias-meses-años Horas:minutos:segundos)

$diffd = getDateDifference($dateFrom, $dateTo, 'd');
$diffh = getDateDifference($dateFrom, $dateTo, 'h');
$diffm = getDateDifference($dateFrom, $dateTo, 'm');
$diffs = getDateDifference($dateFrom, $dateTo, 's');
$diffa = getDateDifference($dateFrom, $dateTo, 'a');



echo $diffd . ' Dias.<br />';
echo $diffh . ' Horas.<br />';
echo $diffm . ' Minutos.<br />';
echo $diffs . ' Segundos.<br />';

$diffa['days'] = abs($diffa['days']);
$diffa['hours'] = abs($diffa['hours']);
$diffa['minutes'] = abs($diffa['minutes']);
$diffa['seconds'] = abs($diffa['seconds']);
echo '<br />Faltan ' . $diffa['days'] . ' dias, ' . $diffa['hours'] . ' horas, ' . $diffa['minutes'] . ' minutos y ' . $diffa['seconds'] . ' segundos para lo que sea (acabar el partido)<br>';

?>


<?php

function getDateDifference($dateFrom, $dateTo, $unit = 'd')
{
   $difference = null;

   $dateFromElements = split(' ', $dateFrom);
   $dateToElements = split(' ', $dateTo);

   $dateFromDateElements = split('-', $dateFromElements[0]);
   $dateFromTimeElements = split(':', $dateFromElements[1]);
   $dateToDateElements = split('-', $dateToElements[0]);
   $dateToTimeElements = split(':', $dateToElements[1]);

   //Unix timestamp para ambas fechas.

   $date1 = mktime($dateFromTimeElements[0], $dateFromTimeElements[1], $dateFromTimeElements[2], $dateFromDateElements[1], $dateFromDateElements[0], $dateFromDateElements[2]);
   $date2 = mktime($dateToTimeElements[0], $dateToTimeElements[1], $dateToTimeElements[2], $dateToDateElements[1], $dateToDateElements[0], $dateToDateElements[2]);



   $diff = $date1 - $date2;

   $days = 0;
   $hours = 0;
   $minutes = 0;
   $seconds = 0;

   if ($diff % 86400 <= 0)  //Hay 86400 segundos en un dia.
   {
       $days = $diff / 86400;
   }

   if($diff % 86400 > 0)
   {
       $rest = ($diff % 86400);
       $days = ($diff - $rest) / 86400;

       if( $rest % 3600 > 0 )
       {
           $rest1 = ($rest % 3600);
           $hours = ($rest - $rest1) / 3600;

           if( $rest1 % 60 > 0 )
           {
               $rest2 = ($rest1 % 60);
               $minutes = ($rest1 - $rest2) / 60;
               $seconds = $rest2;
           }
           else
           {
               $minutes = $rest1 / 60;
           }
       }
       else
       {
           $hours = $rest / 3600;
       }
   }

   switch($unit)
   {
       case 'd':
       case 'D':

           $partialDays = 0;

           $partialDays += ($seconds / 86400);
           $partialDays += ($minutes / 1440);
           $partialDays += ($hours / 24);

           $difference = $days + $partialDays;

           break;

       case 'h':
       case 'H':

           $partialHours = 0;

           $partialHours += ($seconds / 3600);
           $partialHours += ($minutes / 60);

           $difference = $hours + ($days * 24) + $partialHours;

           break;

       case 'm':
       case 'M':

           $partialMinutes = 0;

           $partialMinutes += ($seconds / 60);

           $difference = $minutes + ($days * 1440) + ($hours * 60) + $partialMinutes;

           break;

       case 's':
       case 'S':

           $difference = $seconds + ($days * 86400) + ($hours * 3600) + ($minutes * 60);

           break;

       case 'a':
       case 'A':

           $difference = array (
               "days" => $days,
               "hours" => $hours,
               "minutes" => $minutes,
               "seconds" => $seconds
           );

           break;
   }

   return $difference;
}
?>
Bueno es muy fácil como he explicado cambias las 'X' por las fechas y ya esta.
Ah, una cosa al principio habra un cuenta atras hasta la hora escrita, a partir de allí, irá creciendo hasta que la modifiques o quites (asi llegara a 45 min).
Tambien puedes hacer un reload de solo el parrafo para que vaya actualizandose cada X tiempo(con javascript).
Bueno y por la demora te dejo el codigo de un reloj javascript.

Código Javascript: 
Ver original
  1. <script language="javascript">
  2. // Muestra la hora y la fecha, actualizandas cada segundo, en una caja de texto
  3.  
  4.  
  5. //Muestra segundos
  6. function muestraSeg()
  7.   {
  8.   hoyseg=new Date();
  9.   document.formi.seg.value=hoyseg.getSeconds();
  10.   setTimeout("muestraSeg()",1000);
  11.   }
  12.  
  13. //Muestra minutos
  14. function muestraMin()
  15.   {
  16.   hoymin=new Date();
  17.   document.formi.min.value=hoymin.getMinutes();
  18.   setTimeout("muestraMin()",1000);
  19.   }
  20.  
  21. //Muestra horas
  22. function muestraHour()
  23.   {
  24.   hoyhour=new Date();
  25.   document.formi.hour.value=hoyhour.getHours();
  26.   setTimeout("muestraHour()",1000);
  27.   }
  28.  
  29. //Muestra dia
  30. function muestraDay()
  31.   {
  32.   hoyday=new Date();
  33.   document.formi.day.value=hoyday.getDate();
  34.   setTimeout("muestraDay()",1000);
  35.   }
  36.  
  37. //Muestra mes
  38. function muestraMon()
  39.   {
  40.   hoymonth=new Date();
  41.   document.formi.month.value=hoymonth.getMonth();
  42.   
  43.   if(document.formi.month.value==0){
  44.    document.formi.month.value="Enero"
  45.   }else if(document.formi.month.value==1){
  46.    document.formi.month.value="Febrero"
  47.   }else if(document.formi.month.value==2){
  48.    document.formi.month.value="Marzo"
  49.   }else if(document.formi.month.value==3){
  50.    document.formi.month.value="Abril"
  51.   }else if(document.formi.month.value==4){
  52.    document.formi.month.value="Mayo"
  53.   }else if(document.formi.month.value==5){
  54.    document.formi.month.value="Junio"
  55.   }else if(document.formi.month.value==6){
  56.    document.formi.month.value="Julio"
  57.   }else if(document.formi.month.value==7){
  58.    document.formi.month.value="Agosto"
  59.   }else if(document.formi.month.value==8){
  60.    document.formi.month.value="Septiembre"
  61.   }else if(document.formi.month.value==9){
  62.    document.formi.month.value="Octubre"
  63.   }else if(document.formi.month.value==10){
  64.    document.formi.month.value="Noviembre"
  65.   }else{
  66.    document.formi.month.value="Diciembre"
  67.   }
  68.   
  69.   setTimeout("muestraMon()",1000);
  70.   }
  71.  
  72. //Muestra semana
  73. function muestraSem()
  74.   {
  75.   hoysem=new Date();
  76.   document.formi.sem.value=hoysem.getDay();
  77.   
  78.   if(document.formi.sem.value==0){
  79.    document.formi.sem.value="Domingo"
  80.   }else if(document.formi.sem.value==1){
  81.    document.formi.sem.value="Lunes"
  82.   }else if(document.formi.sem.value==2){
  83.    document.formi.sem.value="Martes"
  84.   }else if(document.formi.sem.value==3){
  85.    document.formi.sem.value="Miercoles"
  86.   }else if(document.formi.sem.value==4){
  87.    document.formi.sem.value="Jueves"
  88.   }else if(document.formi.sem.value==5){
  89.    document.formi.sem.value="Viernes"
  90.   }else{
  91.    document.formi.sem.value="Sabado"
  92.   }
  93.   setTimeout("muestraSem()",1000);
  94.   }
  95.  
  96. //Muestra ano
  97. function muestraYear()
  98.   {
  99.   hoyyear=new Date();
  100.   document.formi.year.value=hoyyear.getFullYear();
  101.   
  102.   if ((document.formi.hour.value==0)&&(document.formi.min.value==0)&&(document.formi.seg.value==0)&&(document.formi.day.value==1)&&(document.formi.month.value=="Enero"))
  103.     {
  104.     alert("Feliz ano " + document.formi.year.value);
  105.     return true;
  106.     }
  107.   setTimeout("muestraYear()",1000);
  108.   }
  109.  
  110.     </script>
  111.  
  112.  
  113.  
  114. <!-- Muestra el formulario con la hora y la fecha -->
  115. <FORM name="formi">
  116. <P align="right">Fecha:
  117. <INPUT type="text" name="sem" size=8> ,
  118. <INPUT type="text" name="day" size=1> de
  119. <INPUT type="text" name="month" size=9> de
  120. <INPUT type="text" name="year" size=3>&nbsp;&nbsp;&nbsp; Reloj:
  121. <INPUT type="text" name="hour" size=1> :
  122. <INPUT type="text" name="min" size=1> :
  123. <INPUT type="text" name="seg" size=1>&nbsp;&nbsp; </P>
  124.  
  125. <SCRIPT language="javascript">
  126. muestraSeg();
  127. muestraMin();
  128. muestraHour();
  129.  
  130. muestraSem();
  131. muestraDay();
  132. muestraMon();
  133. muestraYear();
  134. </SCRIPT>
  135. </FORM>

Venga ya termine xD
Saludos!!

P.D: Haz uso del karma si quieres agradecer :)
  #6 (permalink)  
Antiguo 05/03/2011, 16:59
 
Fecha de Ingreso: febrero-2011
Mensajes: 8
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Necesito un contador de minutos y segundos
muchas gracias kechu por rsponder, mira soy novato en esto..para mi web estoy usando web page maker y me gustaria saber como colocar lo que me dijiste.. disculpa las molestias
  #7 (permalink)  
Antiguo 06/03/2011, 06:57
 
Fecha de Ingreso: febrero-2011
Ubicación: define ('Ubicación', 'Mi_casa');
Mensajes: 21
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Necesito un contador de minutos y segundos
Es muy fácil.
En tu editor crea un archivo con extensión Php, es decir p.ej: index.php .
En el pega el código php que he posteado antes. Lo guardas y lo subes a tu servidor o localhost.

Si quieres saber lo que es un archivo PHP métete [URL="http://es.wikipedia.org/wiki/PHP"]http://es.wikipedia.org/wiki/PHP[/URL]
Última edición por kechu; 06/03/2011 a las 07:05 Razón: Más info

Etiquetas: contador, javascript, minutos, real, segundos
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:54.