SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [Code Review] Old javascript to calculate time

    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.

    Yes, i'm not a specialist...
    Code:
    <!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
    Attached Images Attached Images

  2. #2
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code :
    <!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].value*3600)-(A[0].value*3600)+(A[3].value*60)-(A[1].value*60);
     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&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> to <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>
      <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. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic ! many thanks !

  4. #4
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gyrovague View Post
    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.
    Just divide the seconds by 60.
    A[7].value= nbredeux/60;

  6. #6
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AllanP View Post
    Just divide the seconds by 60.
    A[7].value= nbredeux/60;
    Thank you very much

  7. #7
    Non-Member
    Join Date
    Apr 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ) - (minutes*60)))

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •