[SOLUCIONADO] Diferencia de Horas

mexbale · #1 (**permalink**) 23/08/2013, 01:09

Hola a todos

Quisiera saber como puedo hacer una función:

Tengo 2 campos, hora de inicio y hora de termino y quiero que cuando me llenen esos 2 campos automáticamente salga la diferencia de las 2 horas y que me la ponga en el campo de diferencia de horas. La verdad es la primera vez que quiero hacer eso espero que me puedan ayudar ahorita nada mas tengo el codigo HTML

Código HTML:

Ver original<!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>Diferencia de horas</title>
</head>
<body bgcolor="#CCCCCC" onload="function hora()">
<form name="formulario" action="horas.php" method="post">
<table border="1">
  <tr>
    <td>Hora de Inicio</td>
    <td><div align="right">
      <input name="hora_inicio" type="text" id="hora_inicio" size="5" maxlength="5" onKeyUp="if(this.value.length == '2' && this.value&gt;=24){alert('Chav@ este  ' + this.value + ' es un error'+ '\n' + 'revisa tus valores chat@'); this.value='';this.value.focus();}
        if(this.value.length == '2' && this.value&lt;=23){this.value=(this.value+':')}
        if(this.value.length == '4' && this.value.split(':')[1]&gt;'5'  ){alert('El valor: ' + this.value + ' es un error'+ '\n' + 'revise sus valores'); this.value=this.value.split(':')[0]+ ':';this.value.focus();}
        if(this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}" />
    </div></td>
  </tr>
  <tr>
    <td>Hora de Termino</td>
    <td><div align="right">
      <input name="hora_termino" type="text" id="hora_termino" size="5" maxlength="5" onKeyUp="if(this.value.length == '2' && this.value&gt;=24){alert('Chav@ este  ' + this.value + ' es un error'+ '\n' + 'revisa tus valores chat@'); this.value='';this.value.focus();}
        if(this.value.length == '2' && this.value&lt;=23){this.value=(this.value+':')}
        if(this.value.length == '4' && this.value.split(':')[1]&gt;'5'  ){alert('El valor: ' + this.value + ' es un error'+ '\n' + 'revise sus valores'); this.value=this.value.split(':')[0]+ ':';this.value.focus();}
        if(this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}" />
    </div></td>
  </tr>
  <tr>
    <td colspan="2">Diferencia de Horas<input name="hora_total" type="text" id="hora_total" size="5" maxlength="5" onKeyUp="if(this.value.length == '2' && this.value&gt;=24){alert('Chav@ este  ' + this.value + ' es un error'+ '\n' + 'revisa tus valores chat@'); this.value='';this.value.focus();}
        if(this.value.length == '2' && this.value&lt;=23){this.value=(this.value+':')}
        if(this.value.length == '4' && this.value.split(':')[1]&gt;'5'  ){alert('El valor: ' + this.value + ' es un error'+ '\n' + 'revise sus valores'); this.value=this.value.split(':')[0]+ ':';this.value.focus();}
        if(this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}" /></td>
  </tr>
</table>
</form>
</body>
</html>

De antemano les doy las gracias y espero que haya alguien que me pueda ayudar

Buenas Noches

alpe2000 · #2 (**permalink**) 23/08/2013, 03:16

Esto te puede servir, echale un vistazo.
El script NO lo hice yo, lo encontré "googleando" está un poco adaptado a lo que necesitas, y seguro que se puede optimizar.

Código PHP:

  <!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>Diferencia de horas</title>

</head>

<script type="text/javascript">

function calcular()

{

v1 = document.getElementById("hora_inicio").value;

v2 = document.getElementById("hora_termino").value;

    horas1=v1.split(":"); 

    horas2=v2.split(":");

    horatotale=new Array();

    for(a=0;a<2;a++) 

    {

        horas1[a]=(isNaN(parseInt(horas1[a])))?0:parseInt(horas1[a]) 

        horas2[a]=(isNaN(parseInt(horas2[a])))?0:parseInt(horas2[a])

        horatotale[a]=(horas2[a]-horas1[a]);

    }

    horatotal=new Date()  

    horatotal.setHours(horatotale[0]); 

    horatotal.setMinutes(horatotale[1]);

 
    document.getElementById("hora_total").value = horatotal.getHours()+":"+horatotal.getMinutes();

    }

</script>

 
<body bgcolor="#CCCCCC" >

<form name="formulario"  method="post">

<table border="1">

  <tr>

    <td>Hora de Inicio</td>

    <td><div align="right">

      <input name="hora_inicio" type="text" id="hora_inicio" size="5" maxlength="5" onKeyUp="if(this.value.length == '2' && this.value&gt;=24){alert('Chav@ este  ' + this.value + ' es un error'+ '\n' + 'revisa tus valores chat@'); this.value='';this.value.focus();}

        if(this.value.length == '2' && this.value&lt;=23){this.value=(this.value+':')}

        if(this.value.length == '4' && this.value.split(':')[1]&gt;'5'  ){alert('El valor: ' + this.value + ' es un error'+ '\n' + 'revise sus valores'); this.value=this.value.split(':')[0]+ ':';this.value.focus();}

        if(this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}" value="00:00"/>

    </div></td>

  </tr>

  <tr>

    <td>Hora de Termino</td>

    <td><div align="right">

      <input name="hora_termino" type="text" id="hora_termino" size="5" maxlength="5" onKeyUp="if(this.value.length == '2' && this.value&gt;=24){alert('Chav@ este  ' + this.value + ' es un error'+ '\n' + 'revisa tus valores chat@'); this.value='';this.value.focus();}

        if(this.value.length == '2' && this.value&lt;=23){this.value=(this.value+':')}

        if(this.value.length == '4' && this.value.split(':')[1]&gt;'5'  ){alert('El valor: ' + this.value + ' es un error'+ '\n' + 'revise sus valores'); this.value=this.value.split(':')[0]+ ':';this.value.focus();}

        if(this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}" value="00:00"/>

    </div></td>

  </tr>

  <tr>

    <td colspan="2">Diferencia de Horas<input name="hora_total" type="text" id="hora_total" size="5" maxlength="5" value= "0"/></td>

  </tr>

  <tr>

    <td colspan="2"><input name="calcula" type="button" id="calucula"  value= "calcular!!!" onclick="calcular();"/></td>

  </tr>

</table>

</form>

</body>

</html>

mexbale · #3 (**permalink**) 23/08/2013, 11:02

a ok muchas gracias alpe2000 nada mas una duda como puedo modificar que el resultado te lo de en el formato de horas ejemplo "00:00" por que lo arroja asi "0:00" deja lo checo haber si lo puedo modificar cualquier cosa lo pongo si me sale

Saludos buena tarde
Gracias otra vez