This website uses cookies in order to offer you the most relevant information and services online. Please accept cookies for optimal performance.
Learn More

Integrating jQuery Automatic Timer with PHP

Nov 11, 2015

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.

integrating-jquery-automatic-timer-with-php

Select 'Start Time' (in Hour and Minutes) from their respective drop-down menus as shown in Figure 1. This is the 'Start Time'.

Figure 1
Figure 1

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 in Figure 1.
For ex. in the above example, we have selected the 'Start Time' as '10 Hour and 11 Minutes'. The 'End Time' textbox automatically fills the data.

Initiate the timer by clicking the 'Start' button.

Once you click 'Start' button, it will replace the 'Start' text to 'Stop' as shown in Figure 2.

Figure 2
Figure 2

The image shown in Figure 2 clearly displays that after clicking the 'Start' button, 4 seconds has elapsed and the text in the button has changed from 'Start' to 'Stop'.

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 in Figure 3.

Figure 3
Figure 3

Basic Usage

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>

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>

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();"/>

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

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

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>

PHP Application Framework
Batoi Framework is a PHP application framework with an Integrated Development Environment for Next Generation Apps and Services on the Cloud.
Create your web application without worrying about small things.
Give your feedback to improve the article

Need our assistance? We are available with you.

Existing Customer?
Get Support
Talk To Consultant?
Get An Appointment
Contact Us

Batoi global offices and contact details

Stay Connected

Join our community, newsletters, and social media.