Home » Support » Help Articles » Integrating jQuery Automatic Timer with PHP

Integrating jQuery Automatic Timer with PHP

Back to Help Articles Home


The jquery automatic timer is used to calculate the difference between two time intervals. The difference is obtained in hours.

This guide will walk you through integrating jQuery Automatic Timer in PHP and HTML.

  1. Select 'Start Time' (in Hour and Minutes) from their respective dropdown menus as shown below. This is the 'Start Time'.
  2. Figure One

  3. Upon doing so you can see that the selected Hour and Minutes is displayed in the 'End Time' textbox automatically. However the seconds part remains '00' as shown above.
    For ex. in the above example, we have selected the 'Start Time' as '10 Hour and 11 Mnutes'. The 'End Time' textbox automatically fills the data.
  4. Initiate the timer by clicking the 'Start' button.
  5. Once you click 'Start' button, it will replace the 'Start' text to 'Stop' as shown below.
  6. Figure Two

  7. The above image clearly displays that after clicking the 'Start' button, 4 seconds has elapsed and the text in the button has changed from 'Start' to 'Stop'.
  8. On clicking the 'Stop' button when the desired 'End Time' is achieved, the total time consumed is displayed in the 'Total Time' textbox as shown below.
  9. Figure Three

Basic Usage

  1. In your HTML page create two drop menus for 'Start Time'. The first drop menu should contain numbers from '0' to '23'. This is hour drop menu. Second drop menu should contain numbers from '0' to '59'. This is minute drop menu. Add a JavaScript 'onChange' event to both the drop menus.

    Code for Hour Drop Menu

    <select name="selAutoStrMin" id="selAutoStrMin" onChange="addHour();">
    <?php for($i=0;$i<10; $i++){ ?>
    <option value="<?php print $i;?>">0<?php print $i;?></option>
    <?php } ?>
    <?php for($i=10;$i<60; $i++){ ?>
    <option value="<?php print $i;?>"><?php print $i;?></option>
    <?php } ?>
    </select>
  2. Create a small HTML text area for 'End Time' and add '00:00:00' as the value and give an 'id' to the text area.
    Note: The 'id' of text area should not be used anywhere else in the HTML page.

    Code for End Time Text Area

    <label for="taAutoEndMin" style="width:145px;">End Time</label>
    <div style="width:160px;">
    <textarea name="taAutoEndMin" id="taAutoEndMin" class="textboxNormal" style="width:70px;resize:none;height:20px;">00:00:00</textarea>
    </div>
  3. The next step is to add a button that will trigger the timer. Add a JavaScript 'onClick' event to the button.
    Note: The button should have an 'id' that has not been used anywhere else in the HTML page.

    Code for Start/Stop Button

    <input type=”button” id="butn" value="Start" onClick="changestat();"/>

  4. Create a textbox for 'Total Time'. This box shall store the value of time consumed between two hours. The textbox should have a unique id and it should be in 'Read Only Mode'.

    Code for End Time Text Area

    <input type="textbox" name="txtTotTime" id="txtTotTime" value="0" readonly />

  5. Initiate the JavaScript function when the HTML page loads. To initiate add 'onLoad' event on the body tag of your HTML page..

    Code for onLoad Event

    <input type="textbox" name="txtTotTime" id="txtTotTime" value="0" readonly />

  6. Next within the <script> tag write the function for different JavaScript events added earlier.

    Code for Events

    <script type=”text/javascript”>
    //Global variables
    var sec = 0;
    var mins = 0;
    var hour = 0;
    //Javascript onload function called in body tag.
    function init()
    {
    var hours = document.getElementById('selAutoStrHr').value; //value selected from hour drop menu
    hour = parseInt(hour, 10) + parseInt(hours, 10);
    var min = document.getElementById('selAutoStrMin').value;//value selected from ninute drop menu
    mins = parseInt(mins, 10) + parseInt(min, 10);
    }
    //Javascript onChange function called in hours and minutes drop menu.
    function addHour()
    {
    mins = 0;
    hour = 0;
    var hours = document.getElementById('selAutoStrHr').value; //value selected from hour drop menu
    hour = parseInt(hour, 10) + parseInt(hours, 10);
    var min = document.getElementById('selAutoStrMin').value;//value selected from ninute drop menu
    mins = parseInt(mins, 10) + parseInt(min, 10);
    var sec = document.getElementById('hidSec').value; //Hidden field value “00”. The id of hidden field is hidSec
    var time = ((hours<=9) ? "0"+hours : hours) + ":" + ((min<=9) ? "0" + min : min) + ":" + sec;//Total start time selected in “00:00:00” format. For hours and minutes less than 9, the function adds a 0 before the number.
    document.getElementById('taAutoEndMin').value = time; //Selected value get displayed in End time text area.
    }
    //Javscript onClick function called in button code
    function changestat()
    {
    var a=document.getElementById('butn').value;//Value of button
    if(a=='Start')
    {
    document.getElementById('butn').value='Stop';
    }
    if(a=='Stop')
    {
    document.getElementById('butn').value='Start';

    usetime = document.getElementById('taAutoEndMin').value;//Value of End Time text area after stop button is clicked
    usetimearray = usetime.split(':');//Split is used to convert end time string to array
    usetimehr = usetimearray[0];//End Time hour
    usetimemin = usetimearray[1];//End Time minute
    usetimesec = usetimearray[2];//End Time seconds

    actualhr = document.getElementById('selAutoStrHr').value;
    actualmin = ':' + document.getElementById('selAutoStrMin').value;
    actualsec = ':' + document.getElementById('hidSec').value;
    actualtime = actualhr + actualmin + actualsec;//Actual Start time
    actualtimearray = actualtime.split(':');
    actualtimehr = actualtimearray[0];//Start time hour
    actualtimemin = actualtimearray[1];//Start time minute
    actualtimesec = actualtimearray[2];//Start time seconds

    hrdiff = usetimehr – actualtimehr;//Difference in hour between start and end time
    hrmin = hrdiff * 60;
    minused = usetimemin - actualtimemin;//Difference in minute between start and end time
    secdiff = usetimesec - actualtimesec;//Difference in second between start and end time
    secmin = secdiff/60;
    tottime = parseFloat(hrmin + minused + secmin);//total time consumed in minutes

    var usedHr = tottime / 60;//total time consumed in hours

    document.getElementById('txtTotTime').value = usedHr; //The value to be displayed in total time text box.
    }
    stopwatch();//Call the stopwatch javascript function
    }
    //Javascript stopwatch() function called in changestat() function
    function stopwatch()
    {
    var x = document.getElementById('butn').value;//take the value by id called 'butn' and store that in a variable called 'x'
    if (x=='Stop')
    {
    sec++;//keep adding '1' to the value of sec variable
    if (sec == 60)
    {
    sec = 0;//set the value of sec to '0'
    mins = mins + 1; //add '1' to current value of mins
    }
    else
    {
    mins = mins; //the value of mins remains same
    }
    if (mins == 60)
    {
    mins = 0;//set the value of mins to '0'
    hour += 1;//add '1' to current value of hours
    }
    if (sec<=9)
    {
    sec = "0" + sec;//here we add 0 in front of the number which are less than 10 eg: 01
    }
    var stwa=document.getElementById('taAutoEndMin');//take the element by id called 'taAutoEndMin' and store that in a variable called 'stwa'
    stwa.value= ((hour<=9) ? "0"+hour : hour) + ":" + ((mins<=9) ? "0" + mins : mins) + ":" + sec; //set the value in end time text area field eg:00:02:01
    SD=window.setTimeout("stopwatch();", 1000); //this line will refresh the value of end time text area field every second
    }
    }

    </script>


Updated on Nov 11, 2015

The techReview is an online magazine by Batoi and publishes articles on current trends in technologies across different industry verticals and areas of research. The objective of the online magazine to provide an insight into cutting-edge technologies in their evolution from labs to market.

Visit techReview


English - IN (USD)
New Users? Signup.     Existing Users? Login.