how to Calculate response time in asp:repeater textbox using Javascript? - javascript

I Have a multiple text-box bounded with asp:repeater , I want to calculate time taken to type a text in that textbox, after textbox appeares. I tried it through onblur and onfocus events , but not working properly, as its taking onfocus time of next textbox while calculating time for previous textbox.
My repeater code is as follows
<asp:Repeater ID="rpt1" runat="server">
<asp:TextBox ID="txt1" autocomplete="off" EnableViewState="true" onfocus="f1(this);" onblur="f2(this);" runat="server"></asp:TextBox>
</asp:Repeater>
And javascript code like this
function f1(e) {
var onFocusTextTime = new Date().getTime();
alert("onFocus:" + onFocusTextTime);
return onFocusTextTime;
}
function f2(e) {
var responceForAnswer = "";
var diff_result = "";
var onBlurTextTime = new Date().getTime();
alert("onBlur:" + onBlurTextTime);
var onFocusTextTime = f1();
diff_result = onFocusTextTime - onBlurTextTime;
alert("diff_result:" + diff_result);
var hours = diff_result / (1000 * 60 * 60);
var absoluteHours = Math.floor(hours);
var h = absoluteHours > 9 ? absoluteHours : '0' + absoluteHours;
var minutes = (hours - absoluteHours) * 60;
var absoluteMinutes = Math.floor(minutes);
var m = absoluteMinutes > 9 ? absoluteMinutes : '0' + absoluteMinutes;
var seconds = (minutes - absoluteMinutes) * 60;
var absoluteSeconds = Math.floor(seconds);
var s = absoluteSeconds > 9 ? absoluteSeconds : '0' + absoluteSeconds;
responceForAnswer = h + ':' + m + ':' + s;
alert("responceForAnswer:" + responceForAnswer);
}

i just changed my code in following way and its worked
var onFocusTextTime;
var onFocusTextTimeForPrevTextBox = new Date().getTime();
function f1(e) {
onFocusTextTime = onFocusTextTimeForPrevTextBox;
onFocusTextTimeForPrevTextBox = new Date().getTime();
return onFocusTextTime;
}
function f2() {
var responceForAnswer = "";
var diff_result = "";
var onBlurTextTime = new Date().getTime();
var onFocusTextTime = f1();
diff_result = onBlurTextTime - onFocusTextTime;
var hours = diff_result / (1000 * 60 * 60);
var absoluteHours = Math.floor(hours);
var h = absoluteHours > 9 ? absoluteHours : '0' + absoluteHours;
var minutes = (hours - absoluteHours) * 60;
var absoluteMinutes = Math.floor(minutes);
var m = absoluteMinutes > 9 ? absoluteMinutes : '0' + absoluteMinutes;
var seconds = (minutes - absoluteMinutes) * 60;
var absoluteSeconds = Math.floor(seconds);
var s = absoluteSeconds > 9 ? absoluteSeconds : '0' + absoluteSeconds;
responceForAnswer = h + ':' + m + ':' + s;
console.log(responceForAnswer);
}

Related

jQuery Timer that refreshes a div element when the minute changes

I am trying to get a div element to update once one minute goes by from.
I have a function in Javascript that counts down to a specific time in the day, however, I would like to use JQuery so that as the timer is counting down when the minute changes instead of having to refresh the browser it does it without refreshing.
I had a timer that displayed hours, minutes, seconds counting down to a specific setHours() using a setTimout to countdown.
function countdown() {
var now = new Date();
var eventDate = new Date();
var currentTiime = now.getTime();
var eventTime = eventDate.setHours(16, 30, 0);
var remTime = eventTime - currentTiime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
h %= 24;
m %= 60;
s %= 60;
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
document.getElementById("hours").textContent = h;
document.getElementById("minutes").textContent = m;
document.getElementById("seconds").textContent = s;
if (now.getHours() >= 9 && currentTiime < eventTime) {
setTimeout(countdown, 1000);
}
At the moment I have a countdown that countdown to 16:30 but displays as:
Hours: minutes: seconds: I would like Hours:xx minutes:xx and when the minute goes down 1 minute it shows in the div without refreshing the page.
Here is a solution that has a bit of JQuery strewn in. Please note that your Javascript solution will work as well. The only difference is that this calls setInterval instead of setTimeout ('setInterval' vs 'setTimeout')
Please try running the code snippet here or on JSFiddle: https://jsfiddle.net/raghav710/tbvmj4px/ . This updates the value without refreshing the page.
EDIT: Added condition to handle when the current time is greater than event time
function get_elapsed_time_string(total_seconds) {
var now = new Date();
var eventDate = new Date();
var currentTime = now.getTime();
var eventTime = eventDate.setHours(17, 00, 0);
var remTime = eventTime - currentTime;
if(remTime <= 0){
clearInterval(interval_id);
$("#hours").html(0);
$("#minutes").html(0);
$("#seconds").html(0);
}
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
h %= 24;
m %= 60;
s %= 60;
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
$("#hours").html(h);
$("#minutes").html(m);
$("#seconds").html(s);
}
var elapsed_seconds = 0;
var interval_id =
setInterval(function() {
elapsed_seconds = elapsed_seconds + 1;
get_elapsed_time_string(elapsed_seconds);
console.log(interval_id);
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
function countdown(){
var now = new Date();
var eventDate = new Date();
var currentTiime = now.getTime();
var eventTime = eventDate.setHours(16, 30, 0);
var remTime = eventTime - currentTiime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
h %= 24;
m %= 60;
s %= 60;
h = (h < 10) ? h +" hrs" : h + "hrs";
h = (h <= 1) ? "" : h;
m = (m < 10) ? "0" + m + " mins" : m + " mins ";
if(now.getHours() >= 9 && currentTiime < eventTime){
setTimeout(countdown, 1000);
document.getElementById("timer").textContent = h + " " + m;
}
else if(now.getHours() < 9 || currentTiime >= eventTime){
var t = document.getElementsByClassName("order-day")[0];
t.getElementsByClassName("order-day")[0].textContent = "Order by 4:30pm for same day dispatch";
hideCountdown();
}

Converting decimal to hours and minutes - Javascript

I just can't figure why this doesn't work for some odd values.
For example when trying to convert 22.68 to hours and minutes the output is 22:40.800000000000004 (Seconds shouldn't even appear)
if (str_HR_PER_WEEK.indexOf('.') > -1)
{
var str_HR_PER_WEEK_hrs = str_HR_PER_WEEK.substring(0 , str_HR_PER_WEEK.indexOf('.'));
var str_HR_PER_WEEK_mins = str_HR_PER_WEEK.substring(str_HR_PER_WEEK.indexOf('.') + 1);
var float_HR_PER_WEEK_mins = parseFloat("0." + (str_HR_PER_WEEK_mins), 10);
var float_HR_PER_WEEK_mins_actual = float_HR_PER_WEEK_mins * 60;
float_HR_PER_WEEK_mins_actual = float_HR_PER_WEEK_mins_actual.toString();
tables.CURRENT_EMPLOYEES.HOURS_PER_WEEK.value = getTwoDigitTime(str_HR_PER_WEEK_hrs) + ":" + getTwoDigitTime(float_HR_PER_WEEK_mins_actual);
}
else
{
tables.CURRENT_EMPLOYEES.HOURS_PER_WEEK.value = str_HR_PER_WEEK;
}
You have to ways to achieve that,
one, do the calculations yourself:
var decimalTimeString = "1.6578";
var decimalTime = parseFloat(decimalTimeString);
decimalTime = decimalTime * 60 * 60;
var hours = Math.floor((decimalTime / (60 * 60)));
decimalTime = decimalTime - (hours * 60 * 60);
var minutes = Math.floor((decimalTime / 60));
decimalTime = decimalTime - (minutes * 60);
var seconds = Math.round(decimalTime);
if(hours < 10)
{
hours = "0" + hours;
}
if(minutes < 10)
{
minutes = "0" + minutes;
}
if(seconds < 10)
{
seconds = "0" + seconds;
}
alert("" + hours + ":" + minutes + ":" + seconds);
Two, use built in function to convert to string and then to hh:mm:
var decimalTimeString = "1.6578";
var n = new Date(0,0);
n.setSeconds(+decimalTimeString * 60 * 60);
n.setMinutes(+decimalTimeString * 60);
var result = n.toTimeString().slice(0, 5);
document.write(result);
I've got a neat function to do just that:
function hoursToHHMM(hours) {
var h = String(Math.trunc(hours)).padStart(2, '0');
var m = String(Math.abs(Math.round((hours - h) * 60))).padStart(2, '0');
return h + ':' + m;
}
It handles negative values as a bonus.
Usage is trivial:
var hours = -7.33333;
console.log(hoursToHHMM(hours));
Results in: -07:20
You can play with it here: https://jsfiddle.net/r150c2me/

javascript compare Two Times

Trying to get it to change between 16:30:00 and 17:30:00, to change the text font colour
Tried nested if statements as well
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
if ((h>=16 && m >=30) && (h<=17 && m<=30))
{
document.getElementById("txt").style.color = "red";
}
else
{
document.getElementById("txt").style.color = "black";
}
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
try to use setInterval() it's look more clear:
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
if((h==16 && m>=30) || (h==17 && m<=30)){
document.getElementById("txt").style.color = "red";
}
else
{
document.getElementById("txt").style.color = "black";
}
};
setInterval(startTime, 500);
The main bug in your logic is looking for minutes where it is both less than and equal to 30 AND greater than and equal to 30. The only way that part evaluates to true is if minutes is 30.
I would normalize the time (so that each combination of hour, minute and second can be represented by a unique number) and use that for comparisons.
function startTime(el) {
var today = new Date();
var hour = today.getHours(),
minute = today.getMinutes(),
second = today.getSeconds();
var normalized_time = normalizeTime(hour, minute, second);
document.getElementById(el).innerHTML
= hour + ":" + padTime(minute) + ":" + padTime(second);
document.getElementById(el).style.color
= normalized_time >= normalizeTime(16, 30, 0)
&& normalized_time <= normalizeTime(17, 30, 0)
? 'red'
: 'black';
}
/*
* Add a 0 to the beginning of the number if one-digit number
*/
function padTime(i) {
return i < 10 ? '0' + i : i;
}
/*
* Converts the time to a normalized version
*/
function normalizeTime(h, m, s) {
return s + (60 * m) + (60 * 60 * h);
}
var t = setInterval(startTime, 500, 'txt');
<span id="txt"></span>
Edit: As per you question you want to take hour and minute into account for comparison, So i have not included the second's part.
The following function get an integer value against time , that later used for the comparison.
function getSeconds(hh,mm,ss)
{
return (Number(hh) * 60 * 60) + (Number(mm) * 60) + Number(ss);
}
Complete code :
function getSeconds(hh,mm,ss)
{
return (Number(hh) * 60 * 60) + (Number(mm) * 60) + Number(ss);
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
var timeNow = getSeconds(h,m,s);
//if ((h>=16 && m >=30) && (h<=17 && m<=30))
if (timeNow >= getSeconds(16,30,0) && timeNow <= getSeconds(17,30,00))
{
document.getElementById("txt").style.color = "red";
}
else
{
document.getElementById("txt").style.color = "black";
}
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
startTime();
Updated Fiddle
Previous Response
Try the Fiddle
The problem with your code is you are comparing m with contradictory conditions.
I have concatenated the hour and minutes like following and used that for time comparison
var hrs = Number(h+'.'+m);
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
var hrs = Number(h+'.'+m);
//if ((h>=16 && m >=30) && (h<=17 && m<=30))
if (hrs >= 16.30 && hrs <= 17.30)
{
document.getElementById("txt").style.color = "red";
}
else
{
document.getElementById("txt").style.color = "black";
}
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
startTime();

Adding 1 to value in textbox

I have a javascript function that I am creating. It is take a time (mm:ss) inputted by a user and then being displayed on a php page.
One of the problems that I, for some reason, cannot seem to work through is getting the minutes to increase by x when seconds is greater than 60.
For example, if the user enters in a run time of 01:53 and a penalty time of 00:25, the output is 01:18, when it really should be 02:18.
I created an if statement with the condition being if seconds is great than 60, to increment the minute by 1.
This is the function that I have so far. Also, is it easier to handle the input of time this way, or would it be easier and more efficient to handle time using the time() function?
function dfbcalc() {
var dfbrun = document.getElementById("dfb_run").value;
var dfbpen = document.getElementById("dfb_pen").value;
var splitdfbrun = dfbrun.split(':');
var splitdfbpen = dfbpen.split(':');
var dfbmin;
var dfbsec;
var dfbtot;
<!-- DFB Time input -->
dfbmin = parseInt(splitdfbrun[0]) + parseInt(splitdfbpen[0])
dfbmin = dfbmin % 60;
dfbsec = parseInt(splitdfbrun[1]) + parseInt(splitdfbpen[1])
dfbsec = dfbsec % 60;
if (dfbsec < 10) {
dfbsec = '0' + dfbsec;
}
if (dfbsec > 60) {
dfbmin = dfbmin + 1;
}
alert(+dfbmin + ':' + dfbsec)
dfbtot = '0' + dfbmin + ':' + dfbsec;
document.getElementById("dfb_com").value = dfbtot;
}
var dfbrun = "01:53"
var dfbpen = "00:25"
var splitdfbrun = dfbrun.split(':');
var splitdfbpen = dfbpen.split(':');
var dfbmin;
var dfbsec;
var dfbtot;
<!-- DFB Time input -->
dfbmin = parseInt(splitdfbrun[0]) + parseInt(splitdfbpen[0])
dfbmin = dfbmin % 60;
dfbsec = parseInt(splitdfbrun[1]) + parseInt(splitdfbpen[1])
dfbsec = dfbsec % 60;
if (dfbsec < 10) {
dfbsec = '0' + dfbsec;
}
if (dfbsec > 60) {
dfbmin = dfbmin + 1;
}
document.write(+dfbmin + ':' + dfbsec+"<br/>")
dfbtot = '0' + dfbmin + ':' + dfbsec;
document.write(dfbtot);
It's your order of operation. You're cutting the value off before checking how many minutes to add.
dfbmin = parseInt(splitdfbrun[0]) + parseInt(splitdfbpen[0])
dfbmin = dfbmin % 60;
dfbsec = parseInt(splitdfbrun[1]) + parseInt(splitdfbpen[1])
// Update Minutes
if (dfbsec >= 60) {
dfbmin = dfbmin + 1;
}
// Update seconds
dfbsec = dfbsec % 60;
if (dfbsec < 10) {
dfbsec = '0' + dfbsec;
}
You can convert all to seconds and back to minutes and seconds.
That makes it easier to grasp the order.
function pad(num) {
return ("0"+num).slice(-2);
}
function getTot(dfbrun,dfbpen) {
var splitdfbrun = dfbrun.split(':');
var splitdfbpen = dfbpen.split(':');
var dfbmin;
var dfbsec;
<!-- DFB Time input -->
dfbmin = parseInt(splitdfbrun[0],10) + parseInt(splitdfbpen[0],10);
dfbsec = dfbmin * 60;
dfbsec += parseInt(splitdfbrun[1],10) + parseInt(splitdfbpen[1],10);
dfbmin = Math.floor(dfbsec / 60);
dfbsec = dfbsec - dfbmin * 60;
return pad(dfbmin) + ':' + pad(dfbsec);
}
var dfbrun = "01:53"
var dfbpen = "00:25"
document.write(getTot(dfbrun,dfbpen));

calculate time difference in HH:mm using keyup in javascript or jquery

there are 6 input fields out off which 5 input boxes will be filled with time and the result must come on to the 6th input box.
html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="time" id="start" name="logintime"/>
<input type="time" id="end"name="logouttime" />
<input type="time" id="lunch" name="lunch" />
<input type="time" id="startafterlunch" name="afterlunchlogin"/>
<input type="time" id="endafterlunch" name="afterlunchlogout"/>
<input id="totalTime" readonly="readonly" />
javascript:
$(document).ready(function(){
var $time1 = $("#start");
var $time2 = $("#end");
var $time3 = $("#lunch");
var $time4 = $("#startafterlunch");
var $time5 = $("#endafterlunch");
var $diff = $("#totalTime");
function updateHours(){
var dtStart = new Date("7/20/2015 " + $time1.val());
var dtEnd = new Date("7/20/2015 " + $time2.val());
var dtLunch= new Date("7/20/2015 " + $time3.val());
var dtStartafterlunch = new Date("7/20/2015 " + $time4.val());
var dtEndafterlunch = new Date("7/20/2015 " + $time5.val());
var diff = (dtEnd - dtStart)+(dtEndafterlunch-dtStartafterlunch);
$diff.val(diff/1000);
}
$time1.add($time2).on("change, keyup", function(){
if($time1.val() && $time2.val()){
updateHours()
}
});
});
I took the code from an example of adding two time. but i dont know in the keyup how to add the other three time's and the result in the 6th box is in secs, I want to make it as HH:mm. Please help.
Thanks!!
Here you go:
$(document).ready(function(){
var $time1 = $("#start");
var $time2 = $("#end");
var $time3 = $("#lunch");
var $time4 = $("#startafterlunch");
var $time5 = $("#endafterlunch");
var $diff = $("#totalTime");
function updateHours(){
var dtStart = new Date("7/20/2015 " + $time1.val());
var dtEnd = new Date("7/20/2015 " + $time2.val());
var dtLunch= new Date("7/20/2015 " + $time3.val());
var dtStartafterlunch = new Date("7/20/2015 " + $time4.val());
var dtEndafterlunch = new Date("7/20/2015 " + $time5.val());
var diff = ((dtEnd - dtStart)+(dtEndafterlunch-dtStartafterlunch)) / 1000;
var hours = parseInt( diff / 3600 ) % 24;
var minutes = parseInt( diff / 60 ) % 60;
var seconds = diff % 60;
var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
$diff.val(result);
}
$("#start, #end, #lunch, #startafterlunch, #endafterlunch, #totalTime").on("change, keyup", function(){
if($time1.val() && $time2.val() && $time4.val() && $time5.val()){
updateHours();
}
});
});
To calculate difference in HH:mm format:
var d1 = new Date(2025, 10, 28, 10, 25, 48, 498);
var d2 = new Date(2025, 10, 28, 12, 28, 32, 500);
var diff = d2 - d1; // it is difference in milliseconds
var totalHours = 1.0 * diff / 1000 / 60 / 60;
var hours = Math.floor(totalHours);
var minutes = Math.floor((totalHours - hours) * 60);
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
console.log(hours + ":" + minutes);

Categories

Resources