[Code Review] Old javascript to calculate time

JavaScript
1

Bonjour

I try to speak english… So, i have a web page like this. It calculate time for a database. The javascript is “old” and i would like to change it.

:goof::goof: Yes, i’m not a specialist…

<!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>

<script type="text/javascript">
//<![CDATA[

function reportdebutst() {
debutsth = document.formulaire.champ56.value;
debutstm = document.formulaire.champ57.value;
document.formulaire.debut.value = debutsth +":"+ debutstm;
}

function reportfinst() {
finsth = document.formulaire.champ52.value;
finstm = document.formulaire.champ53.value;
document.formulaire.fin.value = finsth +":"+ finstm;
}

function calcul_sousdeux()
{
i= document.formulaire.champ51.value;
j= document.formulaire.champ52.value;
k= document.formulaire.champ53.value;
l= document.formulaire.champ54.value;
m= document.formulaire.champ55.value;
n= document.formulaire.champ56.value;
o= document.formulaire.champ57.value;
p= document.formulaire.champ58.value;
nbredeux= (((i*86400)+(j*3600)+(k*60)+(l*1))-((m*86400)+(n*3600)+(o*60)+(p*1)))
if (nbredeux<0)
{
nbredeux=0;
alert("L'heure de début doit être inférieure à l'heure de fin !");
}
nbre5= Math.floor(nbredeux/86400)
nbre6= Math.floor((nbredeux-(nbre5*86400))/3600)
nbre7= Math.floor(((nbredeux-((nbre5*86400)+(nbre6*3600))))/60)
nbre8= (nbredeux-((nbre5*86400)+(nbre6*3600)+(nbre7*60)))
document.formulaire.champ59.value= nbre5
document.formulaire.champ60.value= nbre6
document.formulaire.champ61.value= nbre7
document.formulaire.duree.value= nbre8
}

function calcul2()
{
nbre5= document.formulaire.champ59.value;
nbre6= document.formulaire.champ60.value;
nbre7= document.formulaire.champ61.value;
nbre8= document.formulaire.duree.value;
résultat= ((nbre5*86400)+(nbre6*3600)+(nbre7*60)+(nbre8*1))/60
document.formulaire.champ59.value= 0;
document.formulaire.champ60.value= 0;
document.formulaire.champ61.value= 0;
document.formulaire.duree.value= résultat;
}

//]]>
</script>
<form action="#" method="post" name="formulaire" id="formulaire" onsubmit="return verification(formulaire)">
<p>
<label class = "text" for = "start">He worked from :</label>
<input type="hidden" size="2" name="champ54" readonly="readonly" />
<input type="hidden" size="2" name="champ55" readonly="readonly" />
<select name="champ56">
        <option value="08">08&nbsp;</option>
        <option value="09">09&nbsp;</option>
       ...
        <option value="17">17&nbsp;</option>
</select>

<select name="champ57">
<option value="00">00&nbsp;</option>
<option value="01">01&nbsp;</option>
...
<option value="59">59&nbsp;</option>
</select>

      
      
<input type="hidden" name="champ58" readonly="readonly" />
to <input type="hidden" name="champ51" readonly="readonly" />

<select name="champ52">
       <option value="08">08&nbsp;</option>
        <option value="09">09&nbsp;</option>
...
        <option value="17">17&nbsp;</option>
</select>

<select name="champ53">
<option value="00">00&nbsp;</option>
<option value="01">01&nbsp;</option>
<option value="02">02&nbsp;</option>
...
<option value="59">59&nbsp;</option>
</select>
</p>
<input type="hidden" size="2" name="champ59" readonly="readonly" />
<input type="hidden" size="2" name="champ60" readonly="readonly" />
<input type="hidden" size="2" name="champ61" readonly="readonly" />

<input type="submit" value="Valider" onclick="calcul_sousdeux(),reportdebutst(),reportfinst(),calcul2()"  />
</form>
</div>
</body>
</html>

It works but i would like to change it. (It’s very long)

Can you help me ?

Thank you very much

table request result

2

Here is a script that is much smaller than the original. I have changed your hidden input elements into text input elements so that you can see the intermediate calculations. You can modify it to meet your own needs. I have also changed the submit button to a normal button, so the form will not submit until you change it.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>
<script type=“text/javascript”>
<!–
function calcul_sousdeux()
{ var allElems=document.formulaire.elements, A=new Array();
// put all form elements into array A()
for(var i=0;i<allElems.length;i++){ if(allElems[i].className !=“non”){A[A.length]=allElems[i]; } }
// note: A[0]=champ56, A[1]=champ58, A[2]=champ52, A[3]=champ53, A[4]=champ59, A[5]=champ60, A[6]=champ61, A[7]=Duree, A[8]=debut, A[9]=fini.
nbredeux= (A[2].value3600)-(A[0].value3600)+(A[3].value60)-(A[1].value60);
if (nbredeux<=0){ nbredeux=0; alert(“L’heure de début doit être inférieure à l’heure de fin !”); return; }
A[5].value= Math.floor(nbredeux/3600); // hrs worked
A[6].value= Math.floor((nbredeux-(A[5].value*3600))/60); // minutes worked
A[7].value= nbredeux; // total second worked
A[8].value = A[0].value +“:”+ A[1].value;
A[9].value = A[2].value +“:”+ A[3].value;
}
// ---------
//–>
</script>
<style type=“text/css”>
<!–
input { text-align:center; }
//–>
</style>
<title>Time Calcs</title>
</head>

<body>

<form action=“#” method=“post” name=“formulaire” id=“formulaire”>
<!-- onsubmit=“return verification(formulaire)”> –>
<p><label class=“text” for=“start”>He worked from :</label>
<select name=“champ56”>
<option value=“08”>08 </option>
<option value=“09”>09 </option>
<option value=“17”>17 </option>
</select> <select name=“champ57”>
<option value=“00”>00 </option>
<option value=“01”>01 </option>
<option value=“59”>59 </option>
</select> to <select name=“champ52”>
<option value=“08”>08 </option>
<option value=“09”>09 </option>
<option value=“17”>17 </option>
</select> <select name=“champ53”>
<option value=“00”>00 </option>
<option value=“01”>01 </option>
<option value=“02”>02 </option>
<option value=“59”>59 </option>
</select></p>
<p><input type=“hidden” size=“20” name=“champ59” value=“0” readonly>hr:
<input type=“text” size=“10” name=“champ60” value=“0” readonly> min:
<input type=“text” size=“10” name=“champ61” value=“0” readonly></p>
<p></p>
<p>Duree ( total sec)
<input type=“text” size=“10” name=“duree” value=“0” readonly> Debut (start)
<input type=“text” size=“10” name=“debut” value=“0” readonly> fin (finish)
<input type=“text” size=“10” name=“fin” value=“0” readonly> </p>
<p>
<input type=“button” class=“non” value=“Valider” onclick=“calcul_sousdeux()”></p>
</form>
</div>

</body>

</html>

3

Fantastic ! many thanks !

4

Can I ask you something else? In fact, the field ‘duree’ must be in minutes because i send minutes in the database. Thank you very much.

5

Just divide the seconds by 60.
A[7].value= nbredeux/60;

6

Thank you very much :slight_smile:

7

Hi,
You can use this code in your page after head section of your web page and this coding is running.
<script type=“text/javascript”>
function display_c(start){
window.start = parseFloat(start);
var end = 0 // change this to stop the counter at a higher value
var refresh=1000; // Refresh rate in milli seconds
if(window.start >= end ){
mytime=setTimeout(‘display_ct()’,refresh)
}
else {alert("Time Over ");}
}

function display_ct() {
// Calculate the number of days left
var days=Math.floor(window.start / 86400);
// After deducting the days calculate the number of hours left
var hours = Math.floor((window.start - (days * 86400 ))/3600)
// After days and hours , how many minutes are left
var minutes = Math.floor((window.start - (days * 86400 ) - (hours *3600 ))/60)
// Finally how many seconds left after removing days, hours and minutes.
var secs = Math.floor((window.start - (days * 86400 ) - (hours 3600 ) - (minutes60)))

var x = window.start + “(” + days + " Days " + hours + " Hours " + minutes + " Minutes and " + secs + " Secondes " + “)”;

document.getElementById(‘ct’).innerHTML = x;
window.start= window.start- 1;

tt=display_c(window.start);
}
function stop() {
clearTimeout(mytime);
}
</script>
I hope you can relax with this script.