Start Free Trial

asked on

Running Clock Script

I received this script for a running clock utility from this site and it is awesome...except that it starts at 00:00 each time I open the page. I need it to display the running time from a pre-determined time (lngRaceStartTime). I can't figure out why that is not happening. I tried submitting specific values rather than a variable but it always starts at 00:00. Any help would be much appreciated!

            <h1 class="bg-danger" style="text-align:center;">
                <span id="timer-minutes"></span>:<span id="timer-seconds"></span>
            </h1>
            <script>
                class Timer {
                    constructor(startedTime, min, secs) {
                        this.startedTime = startTime;
                        this.minutes = min;
                        this.seconds = secs;
                        this.intervalTimer = false;
                    }


                    stop() {
                        clearInterval(this.intervalTimer);
                    }


                    start() {
                        this.intervalTimer = setInterval(this.tick.bind(this), 1000)
                    }


                    render(time) {
                        const min = Math.floor(time / 60);
                        const secs = time - (min * 60);
                        this.minutes.innerText = ("00" + min).substr(-2);
                        this.seconds.innerText = ("00" + secs).substr(-2);
                    }


                    tick() {
                        const nowSeconds = Math.floor(Date.now() / 1000);
                        const time = nowSeconds - this.startedTime;
                        
                        this.render(time);
                    }
                }


                // Only do this once, without jQuery - not on every tick
                const min_el = document.getElementById('timer-minutes');
                const secs_el = document.getElementById('timer-seconds');


                // Set your start time here - outside of your class - your class should
                // only operate on what it is given (Dependency Injection)
                const startTime = sessionStorage.getItem(<%=lngRaceStart%>) || Math.floor(Date.now() / 1000);
                timer = new Timer(startTime, min_el, secs_el)
                timer.start();            
            </script>

Open in new window

Shouldn't this line:

this.startedTime = startTime;

be:

this.startedTime = startedTime;

otherwise you aren't using the first parm to the constructor...

Just a quick thing I noticed, not sure if it helps, I haven't reviewed all the code in detail...

»bp

I seems to work though, but not sure what you are setting startTime to outside the class (since it's coming from session storage value). For example if I set startTime to ten minutes ago, as in below, then the timer starts at 10:00 which is what it looks like you want, no?

const startTime = Math.floor(Date.now() / 1000) - (10*60)

»bp

ASKER

I believe you are correct. I made that change but it didn't help.

ASKER

So you are submitting the time in minutes?

No, seconds, that's why I multiplied 10*60 to get seconds.

»bp

ASKER

So I put the time of day that the race started, and modified the code a bit, and it now starts at 44:18. Note that the race started at 10:44:18. Here is what I am using:

[code]
  // Set your start time here - outside of your class - your class should
  // only operate on what it is given (Dependency Injection)
  //const startTime = sessionStorage.getItem(<%=lngRaceStart%>) || Math.floor(Date.now() / 1000);
  const startTime = Math.floor(Date.now() / 1000) - (<%=lngRaceStart%>);
  timer = new Timer(startTime, min_el, secs_el)
timer.start();
[/code]

What you described makes sense, since there is no support for hours in that class...

»bp

ASKER

Got it. However, it keeps starting at 44:19, not at the elapsed time on the clock. For instance, if I opened the page thirty minutes after the race started I would want it to start counting from 30:00. If I opened the page forty-five minutes after the race started, I want it to start counting at 45:00.

How can I add hours to this display?

ASKER

This works. Now all I have to do is get hours into the system:

const startTime = Math.floor(<%=lngRaceStart%>);

Do you need help with the hours part, or are you working through that now. I just don't want to duplicate what you might already be working through, but happy to help if that's useful.

»bp

ASKER

I'm working through that now. My js is weak. Here is what I am getting...its not correct. Hours should be 3.

[code]
  <h1 class="bg-danger" style="text-align:center;">
  <span id="timer-hours"></span>:<span id="timer-minutes"></span>:<span id="timer-seconds"></span>
  </h1>
  <script>
  class Timer {
  constructor(startedTime, hrs, min, secs) {
  this.startedTime = startedTime;
  this.hours = hrs;
  this.minutes = min;
  this.seconds = secs;
  this.intervalTimer = false;
}

  stop() {
  clearInterval(this.intervalTimer);
}

  start() {
  this.intervalTimer = setInterval(this.tick.bind(this), 1000)
}

  render(time) {
  const hrs = Math.floor(time / 60);
  const min = Math.floor(time / 60);
  const secs = time - (min * 60);
  this.hours.innerText = ("00" + hrs).substr(-2);
  this.minutes.innerText = ("00" + min).substr(-2);
  this.seconds.innerText = ("00" + secs).substr(-2);
}

  tick() {
  const nowSeconds = Math.floor(Date.now() / 1000);
  const time = nowSeconds - this.startedTime;

  this.render(time);
}
}

  // Only do this once, without jQuery - not on every tick
  const hrs_el = document.getElementById('timer-hours');
  const min_el = document.getElementById('timer-minutes');
  const secs_el = document.getElementById('timer-seconds');

  // Set your start time here - outside of your class - your class should
  // only operate on what it is given (Dependency Injection)
  //const startTime = sessionStorage.getItem(<%=lngRaceStart%>) || Math.floor(Date.now() / 1000);
  //const startTime = Math.floor(Date.now() / 1000) - (<%=lngRaceStart%>);
  const startTime = Math.floor(<%=lngRaceStart%>);
  timer = new Timer(startTime, hrs_el, min_el, secs_el)
  timer.start();
  </script>

[/code]

One thing I see, try this adjustment.

const hrs = Math.floor(time / 3600);

»bp

ASKER

I had tried that and it gave me 75 hours.

Explaining my last comment, we have to divide seconds by 60 to get minutes, but by 60*60 to get hours (since there are 60 minutes in an hour, and 60 seconds in a minute).

»bp

Seemed to work in a test here. How did you come up with the value stored in lngRaceStart ?

»bp

ASKER

Yep. I get that. that is what I started with when adding hours but it gave me 75 for some odd reason

ASKER

It's coming from a sql server database. It is the time-of-day that the race started. In this case, 10:44:18

Well if it's a single number, then is it seconds since midnight, and therefore in this case would be 18 + (44 * 60) + (19 * 3600) = 71058 ?

»bp

ASKER

Looks like it's 3 days off and the minutes are now over 60

User generated image

ASKER

I am US CST. Race started 38658 seconds after midnight (10:44:18 AM).

Yes, I think I can see that render() needs a little more work. Conceptually, I would typically start with the number of seconds, divide that by 3600 and take the integral result to get the hours. Then the remainder I would divide by 60 and take the integral result of that to get the minutes. And then the remainder is seconds.

Does that make sense?

And how do you want to handle values that are not for times that were today, which will cause the hours value to exceed 24 as you have seen.

»bp

ASKER

I was looking at render as well. There is no need in this application to use on events spanning multiple days. It could start am and end pm but it will always be the same day. I REALLY REALLY appreciate your help. What has to be done with the render()? I can try to follow your pattern and see what I come up with.

Okay, I'll see what I can work up, probably won't be until tomorrow morning though...

»bp

ASKER

Thanks. I have been working on it but just too weak in JS. I'll let you know if I come up with something.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Working on this a bit this morning and I think I see another problem. I think Date.now returns a UTC time value, not a local time value, so that is throwing off the calculations of how long it has been since the started time. Trying to see if there is a way to get an adjusted number of seconds for local time. (note: it does appear that when you display Date.now as a string javascript biases it by the time zone, but not when you look at it as just a number of seconds...)

»bp

Hi,
I'm curious...
What this script is for?
What kind of race?
I would not rely on JS if this is an important calculation...
I would create an apps instead...

@bill the problem is a bit more skewed than that.
The browser will be working on local time - which can be anywhere. The server time injected into the script could be from a different timezone.

The only way to rationally solve this is to use UTC.

When injecting the start time into the script it needs to be in UTC + 0 - then the script will have no problem keeping track.

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

@Bill, what is wrong with the original Class I created? As far as I can tell the only problem was the seeding of the timer - the author was plugging the server value into the sessionStorage item name instead of setting the start time to that value?
I am also confused by this line

const newsecs = Math.floor((Date.now() / 1000) % secPerDay);

Open in new window

Why is this necessary? If the start time is UTC seconds value of the start date time - then the clock time will always be current UTC time (in seconds) minus that value - not sure why you need to bring in the secPerDay bit?

ASKER

Thanks for all of this work. I was out of commission today after my second COVID vaccine. It was tough but I will read through this over the next several hours. I really, really appreciate all of your skills, knowledge, and your willingness to share it!

Julian,

At one point in this thread Bob was seeing hours greater than 24, and he mentioned that the start time he was seeding the class from could be from a prior day. Without knowing much about the use of this timer, he mentioned that he would want to just use the time as if it was today's. That's what prompted me to add the secPerDay, basically removing the date from the start time. Hope that makes sense.

I think this may have been a mistake in the original class too, although you may be able to judge better since it sounds like you were involved in a prior question...

constructor(startedTime, min, secs) {
this.startedTime = startTime;

seems to me should be:

constructor(startedTime, min, secs) {
this.startedTime = startedTime;

»bp

ASKER

I'm in the process of reading through the suggestions. I wonder if maybe some context isn't in order here. Here is exactly what I am trying to do:
1) We time running races, triathlons, Nordic ski races, etc.
2) We enter the time-of-day that the race starts on a web page. It is saved in a database (sql server). The time is entered on the client side using javascript and then saved to the db via classic asp.
3) I want a running clock of how long the race has been going whenever race_clock.asp is opened. This is mostly for our timing staff's benefit.

Thank you!

ASKER

I would love an app but I don't have the ability to create one and I can't find one out there that would suit my needs. If this effort doesn't work I would be willing to pay a reasonable amount for such an app.

Bob,

Thanks for the additional info, hope you're feeling better and back to normal.

Do you have enough to move forward based on the last changes I posted, or are there issues or questions you still have?

»bp

@Bill, thanks for the clarification - however in light of Bob's follow up that still would not make sense

@Bob, if you are timing the event from date / time of start - why do you want to get rid of the days value - that would give a non-related result?
Why not simply have days:hours:min:secs in the display and only display the days / hours once you have clocked up above 3600 secs (in the case of hours) and 86400 secs (in the case of days)

Would that work?

Extending the class to do this is pretty straight forward - but will only do so if it is in line with your requirements.

ASKER

Thanks gentlemen. Julian, yes that would work. The day is a non-issue. It can be there or not. My plan is to not have the clock show once the race date has come and gone but I can handle that with the server-side code.

Bill, yes, I'm feeling better. Thanbk you!

I still haven't had time to try all of the suggestions, I will get to that today.

This is the same script with hours added - adding days is simply doing the same process

            <h1 class="bg-danger" style="text-align:center;">
                <span id="timer-minutes"></span>:<span id="timer-seconds"></span>
            </h1>
            <script>
                class Timer {
                    constructor(startedTime, hours, min, secs) {
                        this.startedTime = startTime;
                        this.hours = hours;
                        this.minutes = min;
                        this.seconds = secs;
                        this.intervalTimer = false;
                    }

                    stop() {
                        clearInterval(this.intervalTimer);
                    }

                    start() {
                        this.intervalTimer = setInterval(this.tick.bind(this), 1000)
                    }

                    render(time) {
                        const hours = Math.floor(time / 3600);
                        const min = Math.floor((time - (hours * 3600)) / 60);
                        const secs = time - (hours * 3600) - (min * 60);
                        this.hoursinnerText = ("00" + hours).substr(-2);
                        this.minutes.innerText = ("00" + min).substr(-2);
                        this.seconds.innerText = ("00" + secs).substr(-2);
                    }

                    tick() {
                        const nowSeconds = Math.floor(Date.now() / 1000);
                        const time = nowSeconds - this.startedTime;
                       
                        this.render(time);
                    }
                }


                // Only do this once, without jQuery - not on every tick
                const hours_el = document.getElementById('timer-hours');
                const min_el = document.getElementById('timer-minutes');
                const secs_el = document.getElementById('timer-seconds');


                // Set your start time here - your class should
                // only operate on what it is given (Dependency Injection)
                // Session storage should not be necessary as we are working
                // relative to fixed time.
                const startTime = <%=lngRaceStart%>;
                timer = new Timer(startTime, hours_el, min_el, secs_el)
                timer.start();            
            </script>

Open in new window

ASKER

This latest solution from Julian appears to be doing exactly what I need it to do...except that it is not showing the hours.If you could let me know how to resolve that I would be very appreciative!

Once again, I can't express enough how nice it is to have people like you folks willing to spend your time to help folks like me. The time and knowledge involved is not lost on me!

One thing I see, it looks like hours is missing from the HTML, so adjust as:

<span id="timer-hours"></span>:<span id="timer-minutes"></span>:<span id="timer-seconds"></span>

»bp

Julian,

Just so you don't think I'm a crazy person, here's the assumption(s) I was working from.

At some time a race is "scheduled" or "set up" in the back end system database.
That race would have the time it starts as the critical value, but was being saved from a Date structure, so would have date info also.
But the date info wasn't entered in the backend system, just the time. So the date was the actual day the event was created (not when it would be run).
As a result at one point when I added hours to the class, it was showing hour values much greater than 24, since it was comparing the whole date/time, which was a date of perhaps days ago compare to the current date, so hours exceeded 24.
As a result I decided to remove the date from the picture, and ignore any date info in both the start time from the database, as well as the current time for the clock ticks.

Hope that makes more sense. I'm not sure if those assumptions are still true, so we'll have to see where Bob ends up.

»bp

ASKER

THanks Bill! I noticed the missing html also and added it, but still no hours. Is shows this (as a sample)
:12:34 I have had the clock running for over an hour

I see one other issue, change to this.

this.hours.innerText = ("00" + hours).substr(-2);

»bp

If you see hours greater than 24 in that version after those corrections then give my earlier version a try please.

<h1 class="bg-danger" style="text-align:center;">
    <span id="timer-hours"></span>:<span id="timer-minutes"></span>:<span id="timer-seconds"></span>
</h1>
<script>
    const secPerMin = 60;
    const secPerHour = 3600;
    const secPerDay = 86400;

    class Timer {
        constructor(startedTime, hrs, min, secs) {
            // Store online time info, no date
            this.startedTime = startedTime % secPerDay;
            this.hours = hrs;
            this.minutes = min;
            this.seconds = secs;
            this.intervalTimer = false;
        }

        stop() {
            clearInterval(this.intervalTimer);
        }

        start() {
            this.intervalTimer = setInterval(this.tick.bind(this), 1000);
        }

        render(time) {
            // Format elapsed time
            const hrs = Math.floor(time / secPerHour);
            const min = Math.floor((time - (hrs * secPerHour)) / secPerMin);
            const secs = (time - (hrs * secPerHour) - (min * secPerMin));
            this.hours.innerText = ("00" + hrs).substr(-2);
            this.minutes.innerText = ("00" + min).substr(-2);
            this.seconds.innerText = ("00" + secs).substr(-2);
        }

        tick() {
            // Get current time, ignore date info
            const nowSeconds = Math.floor((Date.now() / 1000) % secPerDay);
            // If current time if after started time then calculate elapsed time
            if (nowSeconds >= this.startedTime) {
                const time = nowSeconds - this.startedTime;
                this.render(time);
            }
        }
    }

    // Only do this once, without jQuery - not on every tick
    const hrs_el = document.getElementById('timer-hours');
    const min_el = document.getElementById('timer-minutes');
    const secs_el = document.getElementById('timer-seconds');

    // Set your start time here - outside of your class - your class should
    // only operate on what it is given (Dependency Injection)
    const startTime = <%=lngRaceStart%>;
    timer = new Timer(startTime, hrs_el, min_el, secs_el);
    timer.start();            
</script>

Open in new window

»bp

ASKER

I added the last fix and I now see hours but it's 22:39:42 instead of 1:39:42, for instance. What would cause that value?

ASKER

Bill, I just used your script and the hours are fine but the minutes are off by about ten. I will look at this on my end as well.

We are getting closer. Is there anything I can do to compensate you both for your time on this?

Can you share what the integer value you are setting the start time to is (coming from the database I believe)?

Also, did you try the version of code I just posted, just to see how it behaves?

»bp

ASKER

ACtually, I stand corrected. It keeps starting at 1:55:00 every time I open the page.

Being off by 10 minutes does seem odd, assuming the start time you set was actually what you thought it was... And that the system clock on your computer that is running the web page is accurate...

No need for compensation for me, I work these EE questions purely for enjoyment and keep it separate from any consulting I do (which is pretty small these days as I'm well into "retirement").

»bp

ASKER

Done. Minutes and seconds are correct but hours shows 6 when it should be 1

That sounds like a test version from perhaps earlier. Are you using the code from this post:

https://www.experts-exchange.com/questions/29215505/Running-Clock-Script.html?anchorAnswerId=43287490#a43287490

»bp

ASKER

Im using a test race that I "started" today at 35506 seconds

Minutes and seconds are correct but hours shows 6 when it should be 1

That sounds like we may be comparing UTC+0 based time (in the timer logic) to your local time which I suspect is UTC+5 (which got stored in the database). Do you have the code that gets that planned start time on a web page and stores it to the database, you probably need to see what it's doing, and if it is storing local time zone adjusted time, or UTC+0 based time.

»bp

Apologies - comes from adding a response without testing. There was a typo in the assigning to hours

class Timer {
    constructor(startedTime, hours, min, secs) {
        this.startedTime = startTime;
        this.hours = hours;
        this.minutes = min;
        this.seconds = secs;
        this.intervalTimer = false;
    }

    stop() {
        clearInterval(this.intervalTimer);
    }

    start() {
        this.intervalTimer = setInterval(this.tick.bind(this), 1000)
    }

    render(time) {
        const hours = Math.floor(time / 3600);
        const min = Math.floor((time - (hours * 3600)) / 60);
        const secs = Math.floor(time - (hours * 3600) - (min * 60));

        this.hours.innerText = ("00" + hours).substr(-2);
        this.minutes.innerText = ("00" + min).substr(-2);
        this.seconds.innerText = ("00" + secs).substr(-2);
    }

    tick() {
        const nowSeconds = Math.floor(Date.now() / 1000);
        const time = nowSeconds - this.startedTime;
        
        this.render(time);
    }
}


// Only do this once, without jQuery - not on every tick
const hours_el = document.getElementById('timer-hours');
const min_el = document.getElementById('timer-minutes');
const secs_el = document.getElementById('timer-seconds');


// Set your start time here - your class should
// only operate on what it is given (Dependency Injection)
// Session storage should not be necessary as we are working
// relative to fixed time.
const startTime = <%=lngRaceStart%>;;
timer = new Timer(startTime, hours_el, min_el, secs_el)
timer.start();

Open in new window

You can see it working here

Okay, converts 35506 seconds converts to "09:51:46" in hours, minutes, seconds, is that what you expect?

»bp

ASKER

Bill, yes,

Julian, that still gives me a 23:xx:xx time when it should be 2:xx:xx

ASKER

Here is how I set the start time:
[code]
  <form role="form" class="form-inline" name="set_start" method="post"
action="set_time.asp?software=<%=sSoftware%>&event_id=<%=lEventID%>&race_id=<%=lRaceID%>">
  <input type="hidden" id="time" name="time">
  <input type="hidden" name="submit_start" id="submit_start" value="submit_start">
<button class="container-fluid" style="min-height:200px;" name="get_start" id="get_start">Submit</button>

<script>
  document.getElementsByTagName("form")[3].onsubmit = function() {
  var t = new Date().getTime();
document.getElementById("time").value = t;
}
</script>
[/code]

and this...

[code]
'this function will return true if the current date is dst or false based on the 2nd sunday in march or 1st sunday in november: if CheckDayLightSavings(now)="True" then dateadd("h",2,now) else dateadd("h",1,now) end if
'modified by ssf 3/27/2007 from http://www.livio.net/main/asp_functions.asp?id=CheckDayLightSavings%20Function
Private Function CheckDayLightSavings(dtDateTime)
Dim retVal, x, sTempDate
'--- if the date time has the milliseconds, clean them off
' If InStr(1,CStr(dtDateTime),".") <> 0 Then
' dtDateTime = Left(dtDateTime, Len(dtDateTime) - 4)
'End If
'--- If the passed string is a valid date, let's begin checking, otherwise just return False.
If IsDate(dtDateTime) Then
'--- We know what to do with any dates within these months
If Month(dtDateTime) <> 11 And Month(dtDateTime) <> 3 Then
Select Case Month(dtDateTime)
Case 1, 2, 12
retVal = False
Case 4,5, 6, 7, 8, 9, 10
retVal = True
End Select
Else
'--- If the month is March, let's check to see if the date is before or after
'--- 2 AM on the second Sunday of the month
If Month(dtDateTime) = 3 Then
If Day(dtDateTime) > 7 Then
For x = 8 To Day(dtDateTime)
sTempDate = CStr(Month(dtDateTime)) & "/" & x & _
"/" & CStr(Year(dtDateTime))
If Weekday(sTempDate) = 1 Then
If Day(sTempDate) > Day(dtDateTime) Then
'--- 2nd sunday in March has already passed, so we are now in DST
retVal = True
Exit For
Else
'--- It's the second Sunday in March!
'--- Let's see if it's past 2 AM. If there is no time
'--- part in dtDateTime (time part = "00:00:00"),
'--- we are going to assume it's past 2 AM
If (Hour(dtDateTime) >= 2) Or _
(Hour(dtDateTime) = 0 And _
Minute(dtDateTime) = 0 And _
Second(dtDateTime) = 0) Then
retVal = True
Exit For
Else
retVal = False
End If
End If
Else
retVal = False
End If
Next
Else
'--- we know what to do if the day is equal to or less than the 8th
retval = False
End If
'--- If the month is November, let's check to see if date is before or after
'--- 2 AM on the 1st Sunday of the month
ElseIf Month(dtDateTime) = 11 Then
'--- We know what to do if the day is less than then 8th
If Day(dtDateTime) > 7 Then
retval = False
Else
For x = 1 To Day(dtDateTime)
sTempDate = CStr(Month(dtDateTime)) & "/" & x & _
"/" & CStr(Year(dtDateTime))
If Weekday(sTempDate) = 1 Then
If Day(sTempDate) > Day(dtDateTime) Then
'--- 1st sunday in november has already passed,
'--- so we aren't in DST anymore
retVal = False
Exit For
Else
'--- It's the 1st Sunday in november!
'--- Let's see if it's past 2 AM. If there is no time part
'--- in dtDateTime (time part = "00:00:00"),
'--- we are going to assume it's past 2 AM
If (Hour(dtDateTime) >= 2) Or _
(Hour(dtDateTime) = 0 And _
Minute(dtDateTime) = 0 And _
Second(dtDateTime) = 0) Then
retVal = False
Exit For
Else
retVal = True
End If
End If
Else
retVal =True
End If
Next
End If
End If
End If
[/code]

ASKER

The time that it generates has always been correct...

It looks like the "time" field on that web page would be UTC+0 based. Is that what is then stored into the database, or is there any manipulation done on it in the form submit logic?

»bp

ASKER

Sorry. Here is the rest of that:
[code]
'CAPTURE FORMDATA FOR TIME
ephochTime_RaceStart = Request.Form.Item("time") ' #### EXAMPLE DATA: 1572891578547

'CONVERT DATA TO MONTH USING BIG MONTY'S FORMULA
UTC_RaceStart = DateAdd("s", ephochTime_RaceStart/1000, CDate("1970-01-01 00:00:00"))

'CONVERT TO CST OR DST
If CheckDayLightSavings(UTC_RaceStart )=True THEN
dRaceStart=DateAdd("h",-5, UTC_RaceStart )
Else
dRaceStart=DateAdd("h",-6, UTC_RaceStart )
End If

sHourPart = DatePart("h",dRaceStart)
sMinPart = DatePart("n",dRaceStart)
sSecPart = DatePart("s",dRaceStart)

If Len(sMinPart) = 1 Then sMinPart = "0" & sMinPart
If Len(sSecPart) = 1 Then sSecPart = "0" & sSecPart

dRaceStart = sHourPart & ":" & sMinPart & ":" & sSecPart

'only take the first time
bFound = False
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT StartTime FROM StartTimes WHERE RacesID = " & lRaceID
rs.Open sql, conn, 1, 2
If rs.Recordcount > 0 Then bFound = True
rs.Close
Set rs = Nothing

If bFound = False Then
sql = "INSERT INTO StartTimes (RacesID, StartTime, WhenLogged) VALUES (" & lRaceID & ", '" & dRaceStart
sql = sql & "', '" & Now() & "')"
If sSoftware = "Race Time" Then
Set rs =conn.Execute(sql)
ElseIf sSoftware = "Meet Time" Then
Set rs =conn2.Execute(sql)
End If
Set rs = Nothing
End If
[/code]

So I do see some timezone logic in there, so it appears to me that dRaceStart is local time, not UTC+0. Unless SQL turns around and "undoes" that before it stores it in the DB, but I don't know the answer to that...

»bp

@Bob, can you do a copy paste of the HTML on your page so we can play with it.

Also, for that page can you post the start time for the race it pertains to.

I thnk, as Bill has pointed out, the problem is in the setting of the race start time - if it is not UTC then we are going to have issues.

ASKER

Here is the entire page where the race time is set. FYI...we time events and each event has one or more races...just to be clear on the vernacular. The software referred to is for the two different types of events we time (school and citizen...they use different proprietary software.)
[code]
<%@ Language=VBScript%>
<%
Option Explicit

Dim conn, rs, sql, rs2, sql2, conn2
Dim i
Dim lRaceID, lEventID
Dim sEventname, sRaceName, sSoftware, sHourPart, sMinPart, sSecPart, iSeconds
Dim dEventDate, dRaceStart, dDateTime, ephochTime_RaceStart, UTC_RaceStart
Dim Races, Events
Dim bIsLocked, bFound

If Session("role") = vbNullString Then Response.Redirect "/logout.asp"

Session.Timeout=180

lEventID = Request.QueryString("event_id")
lRaceID = Request.QueryString("race_id")
sSoftware = Request.QueryString("software")

Response.Buffer = True 'Turn buffering on
Response.Expires = -1 'Page expires immediately

Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "Provider=SQLNCLI11;Server=1.1.1.1;Database=db;Uid=user_id;Pwd=pwd;"

Set conn2 = Server.CreateObject("ADODB.Connection")
conn2.Open "Provider=SQLNCLI11;Server=1.1.1.1;Database=db2;Uid=user_id;Pwd=pwd;"

If Request.Form.Item("submit_race") = "submit_race" Then
lRaceID = Request.Form.Item("races")
ElseIf Request.Form.Item("submit_event") = "submit_event" Then
lEventID = Request.Form.Item("events")
ElseIf Request.Form.Item("submit_software") = "submit_software" Then
sSoftware = Request.Form.Item("software")
ElseIf Request.Form.Item("submit_start") = "submit_start" Then
'CAPTURE FORMDATA FOR TIME
ephochTime_RaceStart = Request.Form.Item("time") ' #### EXAMPLE DATA: 1572891578547

'CONVERT DATA TO MONTH USING BIG MONTY'S FORMULA
UTC_RaceStart = DateAdd("s", ephochTime_RaceStart/1000, CDate("1970-01-01 00:00:00"))

'CONVERT TO CST OR DST
If CheckDayLightSavings(UTC_RaceStart )=True THEN
dRaceStart=DateAdd("h",-5, UTC_RaceStart )
Else
dRaceStart=DateAdd("h",-6, UTC_RaceStart )
End If

sHourPart = DatePart("h",dRaceStart)
sMinPart = DatePart("n",dRaceStart)
sSecPart = DatePart("s",dRaceStart)

If Len(sMinPart) = 1 Then sMinPart = "0" & sMinPart
If Len(sSecPart) = 1 Then sSecPart = "0" & sSecPart

dRaceStart = sHourPart & ":" & sMinPart & ":" & sSecPart

'only take the first time
bFound = False
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT StartTime FROM StartTimes WHERE RacesID = " & lRaceID
rs.Open sql, conn, 1, 2
If rs.Recordcount > 0 Then bFound = True
rs.Close
Set rs = Nothing

If bFound = False Then
sql = "INSERT INTO StartTimes (RacesID, StartTime, WhenLogged) VALUES (" & lRaceID & ", '" & dRaceStart
sql = sql & "', '" & Now() & "')"
If sSoftware = "Race Time" Then
Set rs =conn.Execute(sql)
ElseIf sSoftware = "Meet Time" Then
Set rs =conn2.Execute(sql)
End If
Set rs = Nothing
End If
End If

i = 0
ReDim Events(2, 0)

If sSoftware = "Race Time" Then
'get fitness events
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT EventID, EventName, EventDate FROM Events WHERE EventDate >= '" & Date & "' ORDER BY EventDate"
rs.Open sql, conn, 1, 2
Do While Not rs.EOF
Events(0, i) = rs(0).Value
Events(1, i) = rs(1).Value
Events(2, i) = "Fitness Event"
i = i + 1
ReDim Preserve Events(2, i)
rs.MoveNext
Loop
rs.Close
Set rs = Nothing
ElseIf sSoftware = "Meet Time" Then
'get cc/nordic
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT MeetsID, MeetName, Sport FROM Meets WHERE MeetDate >= '" & Date & "' ORDER BY MeetDate"
rs.Open sql, conn2, 1, 2
Do While Not rs.EOF
Events(0, i) = rs(0).Value
Events(1, i) = rs(1).Value
Events(2, i) = rs(2).Value
i = i + 1
ReDim Preserve Events(2, i)
rs.MoveNext
Loop
rs.Close
Set rs = Nothing
End If

If CStr(lEventID) = vbNullString Then lEventID = 0

If CLng(lEventID) > 0 Then
If sSoftware = "Race Time" Then
'get event information
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT EventName, EventDate FROM Events WHERE EventID = " & lEventID
rs.Open sql, conn, 1, 2
sEventName = rs(0).Value
dEventDate = rs(1).Value
rs.Close
Set rs = Nothing

Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT RaceID, RaceName, StartTime FROM RaceData WHERE EventID = " & lEventID
rs.Open sql, conn, 1, 2
If rs.RecordCount > 0 Then
Races = rs.GetRows()
Else
ReDim Races(2, 0)
End If
rs.Close
Set rs = Nothing

If CLng(lRaceID) > 0 Then
bIsLocked = False

Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT StartTime FROM StartTimes WHERE RacesID = " & lRaceID
rs.Open sql, conn, 1, 2
If rs.RecordCount > 0 Then
dRaceStart = rs(0).Value
bIsLocked = True
End If
rs.Close
Set rs = Nothing

sql = "SELECT RaceName FROM RaceData WHERE RAceID = " & lRaceID
Set rs = conn.Execute(sql)
sRaceName = rs(0).Value
Set rs = Nothing
End If
ElseIf sSoftware = "Meet Time" Then
'get event information
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT MeetName, MeetDate FROM Meets WHERE MeetsID = " & lEventID
rs.Open sql, conn2, 1, 2
sEventName = rs(0).Value
dEventDate = rs(1).Value
rs.Close
Set rs = Nothing

Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT RacesID, RaceName, RaceTime FROM Races WHERE MeetsID = " & lEventID
sql = sql & " AND RaceName NOT IN ('B-TBD','G-TBD') ORDER BY ViewOrder"
rs.Open sql, conn2, 1, 2
If rs.RecordCount > 0 Then
Races = rs.GetRows()
Else
ReDim Races(2, 0)
End If
rs.Close
Set rs = Nothing

If CLng(lRaceID) > 0 Then
bIsLocked = False

Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT StartTime FROM StartTimes WHERE RacesID = " & lRaceID
rs.Open sql, conn2, 1, 2
If rs.RecordCount > 0 Then
dRaceStart = rs(0).Value
bIsLocked = True
End If
rs.Close
Set rs = Nothing

sql = "SELECT RaceDesc FROM Races WHERE RacesID = " & lRaceID
Set rs = conn2.Execute(sql)
sRaceName = rs(0).Value
Set rs = Nothing
End If
End If
End If

'this function will return true if the current date is dst or false based on the 2nd sunday in march or 1st sunday in november: if CheckDayLightSavings(now)="True" then dateadd("h",2,now) else dateadd("h",1,now) end if
'modified by ssf 3/27/2007 from http://www.livio.net/main/asp_functions.asp?id=CheckDayLightSavings%20Function
Private Function CheckDayLightSavings(dtDateTime)
Dim retVal, x, sTempDate
'--- if the date time has the milliseconds, clean them off
' If InStr(1,CStr(dtDateTime),".") <> 0 Then
' dtDateTime = Left(dtDateTime, Len(dtDateTime) - 4)
'End If
'--- If the passed string is a valid date, let's begin checking, otherwise just return False.
If IsDate(dtDateTime) Then
'--- We know what to do with any dates within these months
If Month(dtDateTime) <> 11 And Month(dtDateTime) <> 3 Then
Select Case Month(dtDateTime)
Case 1, 2, 12
retVal = False
Case 4,5, 6, 7, 8, 9, 10
retVal = True
End Select
Else
'--- If the month is March, let's check to see if the date is before or after
'--- 2 AM on the second Sunday of the month
If Month(dtDateTime) = 3 Then
If Day(dtDateTime) > 7 Then
For x = 8 To Day(dtDateTime)
sTempDate = CStr(Month(dtDateTime)) & "/" & x & _
"/" & CStr(Year(dtDateTime))
If Weekday(sTempDate) = 1 Then
If Day(sTempDate) > Day(dtDateTime) Then
'--- 2nd sunday in March has already passed, so we are now in DST
retVal = True
Exit For
Else
'--- It's the second Sunday in March!
'--- Let's see if it's past 2 AM. If there is no time
'--- part in dtDateTime (time part = "00:00:00"),
'--- we are going to assume it's past 2 AM
If (Hour(dtDateTime) >= 2) Or _
(Hour(dtDateTime) = 0 And _
Minute(dtDateTime) = 0 And _
Second(dtDateTime) = 0) Then
retVal = True
Exit For
Else
retVal = False
End If
End If
Else
retVal = False
End If
Next
Else
'--- we know what to do if the day is equal to or less than the 8th
retval = False
End If
'--- If the month is November, let's check to see if date is before or after
'--- 2 AM on the 1st Sunday of the month
ElseIf Month(dtDateTime) = 11 Then
'--- We know what to do if the day is less than then 8th
If Day(dtDateTime) > 7 Then
retval = False
Else
For x = 1 To Day(dtDateTime)
sTempDate = CStr(Month(dtDateTime)) & "/" & x & _
"/" & CStr(Year(dtDateTime))
If Weekday(sTempDate) = 1 Then
If Day(sTempDate) > Day(dtDateTime) Then
'--- 1st sunday in november has already passed,
'--- so we aren't in DST anymore
retVal = False
Exit For
Else
'--- It's the 1st Sunday in november!
'--- Let's see if it's past 2 AM. If there is no time part
'--- in dtDateTime (time part = "00:00:00"),
'--- we are going to assume it's past 2 AM
If (Hour(dtDateTime) >= 2) Or _
(Hour(dtDateTime) = 0 And _
Minute(dtDateTime) = 0 And _
Second(dtDateTime) = 0) Then
retVal = False
Exit For
Else
retVal = True
End If
End If
Else
retVal =True
End If
Next
End If
End If
End If
Else
'--- if the string passed to the function is not a valid date, let's return false.
retVal = False
End If
CheckDayLightSavings = retVal
End Function%>
<!DOCTYPE html>
<html lang="en">
<head>

<title>GSE Timing Set Race Time</title>
<meta name="description" content="GSE Timing set race times utility for use with Race Time and Meet Time software.">
<meta name="robots" content="noindex" />
</head>

<body>
<div class="container">
<div class="bg-success">
<a href="race_clock.asp?event_id=<%=lEventID%>&race_id=<%=lRaceID%>&software=<%=sSoftware%>">Race Clock</a>
</div>
<h1 class="h1">Set Race Start Times</h1>

<form role="form" class="form-inline" name="which_software" method="post" action="set_time.asp">
<select class="form-control" name="software" id="software" onchange="this.form.get_software.click()">
<option value="">Select Software</option>
<%If CStr(sSoftware) = CStr("Race Time") Then%>
<option value="Race Time" selected>Race Time</option>
<option value="Meet Time">Meet Time</option>
<%ElseIf CStr(sSoftware) = CStr("Meet Time") Then%>
<option value="Race Time">Race Time</option>
<option value="Meet Time" selected>Meet Time</option>
<%Else%>
<option value="Race Time">Race Time</option>
<option value="Meet Time">Meet Time</option>
<%End If%>
</select>
<input type="hidden" name="submit_software" id="submit_software" value="submit_software">
<input type="submit" class="form-control" name="get_software" id="get_software" value="Go">
</form>

<%If Not sSoftware = vbNullString Then%>
<hr>

<form role="form" class="form-inline" name="which_event" method="post"
action="set_time.asp?software=<%=sSoftware%>">
<select class="form-control" name="events" id="events" onchange="this.form.get_event.click()">
<option value="">Select Event</option>
<%For i = 0 to UBound(Events, 2) - 1%>
<%If CLng(lEventID) = CLng(Events(0, i)) Then%>
<option value="<%=Events(0, i)%>" selected><%=Events(1, i)%></option>
<%Else%>
<option value="<%=Events(0, i)%>"><%=Events(1, i)%></option>
<%End If%>
<%Next%>
</select>
<input type="hidden" name="submit_event" id="submit_event" value="submit_event">
<input type="submit" class="form-control" name="get_event" id="get_event" value="Go">
</form>

<%If CLng(lEventID) > 0 Then%>
<hr>

<form role="form" class="form-inline" name="which_race" method="post"
action="set_time.asp?software=<%=sSoftware%>&event_id=<%=lEventID%>">
<select class="form-control" name="races" id="races" onchange="this.form.get_race.click()">
<option value="">Select Race</option>
<%For i = 0 to UBound(Races, 2)%>
<%If CLng(lRaceID) = CLng(Races(0, i)) Then%>
<option value="<%=Races(0, i)%>" selected><%=Races(1, i)%> (<%=Races(2, i)%>)</option>
<%Else%>
<option value="<%=Races(0, i)%>"><%=Races(1, i)%> (<%=Races(2, i)%>)</option>
<%End If%>
<%Next%>
</select>
<input type="hidden" name="submit_race" id="submit_race" value="submit_race">
<input type="submit" class="form-control" name="get_race" id="get_race" value="Go">
</form>
<%End If%>

<%If CLng(lRaceID) > 0 Then%>
<%If bIsLocked = True Then%>
The start time for this race has been set. No further changes will be recorded.

<br>

<div class="bg-success" style="font-weight:bold;text-align:center;">
Start Time For <%=sRaceName%>:
<br>
<%=dRaceStart%>
</div>
<%Else%>
<hr>
<form role="form" class="form-inline" name="set_start" method="post"
action="set_time.asp?software=<%=sSoftware%>&event_id=<%=lEventID%>&race_id=<%=lRaceID%>">
<input type="hidden" id="time" name="time">
<input type="hidden" name="submit_start" id="submit_start" value="submit_start">
<button class="container-fluid" style="min-height:200px;" name="get_start" id="get_start">Submit</button>

</form>
<%End If%>
<%End If%>
<%End If%>
</div>
<script>
document.getElementsByTagName("form")[3].onsubmit = function() {
var t = new Date().getTime();
document.getElementById("time").value = t; // number of millisecond from 01/01/1970
}
</script>
</body>
</html>
<%
conn.Close
Set conn = Nothing

conn2.Close
Set conn2 = Nothing
%>
[/code]

Thanks Bob, but unfortunately that does not help us much as it is in the script that generates the page.

Can you instead view the page in your browser, view source, copy the rendered HTML and paste it here.

Also I notice your code blocks are not displaying correctly. This is because you are using the [code] tags that are no longer recognised
Instead highlight your code and click the code Icon in the toolbar - 5th from the right.

Also I notice your code blocks are not displaying correctly. This is because you are using the [code] tags that are no longer recognized. Instead highlight your code and click the code Icon in the toolbar - 5th from the right.

You can still use the older style markup commands in comments, but it depends on the mode that you set the comment editor in. Notice in the upper right of the comment editor there is a toggle for TEXT versus VISUAL mode. In TEXT mode you can use the markup commands like code blocks etc. But in VISUAL mode (the newer mode) then you do everything via the toolbar and don't embed any markup commands in the comment you type. Hope this helps...

User generated image

»bp

ASKER

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Site made with Mobirise Website Builder v4.9.3, https://mobirise.com -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <meta name="generator" content="Mobirise v4.9.3, mobirise.com">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="shortcut icon" href="/assets/images/g-transparent2-351x345.png" type="image/x-icon">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/web/assets/mobirise-icons/mobirise-icons.css">
    <link rel="stylesheet" href="/assets/tether/tether.min.css">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="/assets/dropdown/css/style.css">
    <link rel="stylesheet" href="/assets/socicon/css/styles.css">
    <link rel="stylesheet" href="/assets/theme/css/style.css">
    <link rel="stylesheet" href="/assets/mobirise/css/mbr-additional.css" type="text/css">

    <script src="/assets/web/assets/jquery/jquery.min.js"></script>
    <script src="/misc/scripts.js" ></script>

<title>GSE Timing Set Race Time</title>
<meta name="description" content="GSE Timing set race times utility for use with Race Time and Meet Time software.">
<meta name="robots" content="noindex" />
</head>

<body>
<div class="container">
    <div class="bg-success">
        <a href="race_clock.asp?event_id=943&amp;race_id=1648&amp;software=Race Time">Race Clock</a>
    </div>
    <h1 class="h1">Set Race Start Times</h1>

    <form role="form" class="form-inline" name="which_software" method="post" action="set_time.asp">
    <select class="form-control" name="software" id="software" onchange="this.form.get_software.click()">
        <option value="">Select Software</option>
        
            <option value="Race Time" selected>Race Time</option>
            <option value="Meet Time">Meet Time</option>
        
    </select>
    <input type="hidden" name="submit_software" id="submit_software" value="submit_software">
    <input type="submit" class="form-control" name="get_software" id="get_software" value="Go">
    </form>

    
        <hr>

        <form role="form" class="form-inline" name="which_event" method="post" 
        action="set_time.asp?software=Race Time">
        <select class="form-control" name="events" id="events" onchange="this.form.get_event.click()">
            <option value="">Select Event</option>
            
                    <option value="938">Fit For Life Trail Run</option>
                
                    <option value="943" selected>Citizens Race 2 Raise</option>
                
                    <option value="1015">Run for the Lake</option>
                
                    <option value="1027">Willie Walleye</option>
                
                    <option value="914">Celebration of Children</option>
                
                    <option value="999">Good Neighbor Days</option>
                
                    <option value="974">Stop the Trafficking</option>
                
                    <option value="979">Rum River Festival</option>
                
                    <option value="972">Perham Turtlefest</option>
                
                    <option value="1006">River Rat</option>
                
                    <option value="1003">Running 4 Ronald Charity</option>
                
                    <option value="961">Spud Fest Lakes Run</option>
                
                    <option value="924">Audreys Purple Dream</option>
                
                    <option value="1014">Firecracker 5K</option>
                
                    <option value="948">Apple Valley Freedom Days</option>
                
                    <option value="958">Baudette Firecracker</option>
                
                    <option value="988">Litchfield Watercade</option>
                
                    <option value="967">Monticello Riverfest</option>
                
                    <option value="1016">Big Ole SUPathon</option>
                
                    <option value="949">Roseau ALS 5k-10k</option>
                
                    <option value="970">Lucky Days</option>
                
                    <option value="983">Wright County Fair 5K</option>
                
                    <option value="1018">Xenia Marathon & Half</option>
                
                    <option value="1012">Giants Valley Run</option>
                
                    <option value="1023">The Dump Run</option>
                
                    <option value="954">Emotions in Motion</option>
                
                    <option value="926">Hanover Harvest Festival</option>
                
                    <option value="925">Great Up North Triathlon</option>
                
                    <option value="955">Yellow Rose-Warroad</option>
                
                    <option value="1022">Yellow Rose-Fargo</option>
                
                    <option value="963">Running of the Beef</option>
                
                    <option value="1007">Bluff Land Tri</option>
                
                    <option value="1000">Noahs Ark 5K</option>
                
                    <option value="930">Red Rooster Run</option>
                
                    <option value="931">Run of the Mill</option>
                
                    <option value="944">Circle the Lake</option>
                
                    <option value="968">Bertram-LaVallee Trail Run</option>
                
                    <option value="1002">Franny Flyer</option>
                
                    <option value="1008">DMCS Spooktacular</option>
                
                    <option value="935">Pumpkin Run</option>
                
                    <option value="937">Gray Ghost</option>
                
                    <option value="1011">STRIDE 5K</option>
                
                    <option value="1025">Tonka Turkey Trot</option>
                
                    <option value="1026">Turkey Day 5k</option>
                
                    <option value="965">IRIS Turkey Trot</option>
                
                    <option value="975">Snowflake Shuffle</option>
                
                    <option value="1013">Irish Scamper</option>
                
                    <option value="1021">Bunny Run</option>
                
                    <option value="1024">GOTR-Mankato</option>
                
                    <option value="994">Team Liam</option>
                
                    <option value="1009">Moose Run</option>
                
                    <option value="1019">Running of the Bays</option>
                
        </select>
        <input type="hidden" name="submit_event" id="submit_event" value="submit_event">
        <input type="submit" class="form-control" name="get_event" id="get_event" value="Go">
        </form>

        
            <hr>

            <form role="form" class="form-inline" name="which_race" method="post" 
            action="set_time.asp?software=Race Time&amp;event_id=943">
            <select class="form-control" name="races" id="races" onchange="this.form.get_race.click()">
                <option value="">Select Race</option>
                
                        <option value="1648" selected>5K (7:45am)</option>
                    
            </select>
            <input type="hidden" name="submit_race" id="submit_race" value="submit_race">
            <input type="submit" class="form-control" name="get_race" id="get_race" value="Go">
            </form>
        
                <hr>
                <form role="form" class="form-inline" name="set_start" method="post" 
                action="set_time.asp?software=Race Time&amp;event_id=943&race_id=1648">
                <input type="hidden" id="time" name="time">
                <input type="hidden" name="submit_start" id="submit_start" value="submit_start">
                <button class="container-fluid" style="min-height:200px;" name="get_start" id="get_start">Submit</button>
                <!--
                    <input type="submit" class="form-control bg-success" name="get_start" id="get_start" value="Set Time Now!"
                style="height:150px;font-weight:bold;font-size:1.5em;">
                -->
                </form>
            
</div>
<script>
    document.getElementsByTagName("form")[3].onsubmit = function() {
    var t = new Date().getTime();
    document.getElementById("time").value = t; // number of millisecond from 01/01/1970
    }
</script>
</body>
</html>

Open in new window

@Bob,

This page seems to be asking to set values? Is this the page that is going to display the time?

ASKER

No. I will add that here:

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Site made with Mobirise Website Builder v4.9.3, https://mobirise.com -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <meta name="generator" content="Mobirise v4.9.3, mobirise.com">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="shortcut icon" href="/assets/images/g-transparent2-351x345.png" type="image/x-icon">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/web/assets/mobirise-icons/mobirise-icons.css">
    <link rel="stylesheet" href="/assets/tether/tether.min.css">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="/assets/dropdown/css/style.css">
    <link rel="stylesheet" href="/assets/socicon/css/styles.css">
    <link rel="stylesheet" href="/assets/theme/css/style.css">
    <link rel="stylesheet" href="/assets/mobirise/css/mbr-additional.css" type="text/css">

    <script src="/assets/web/assets/jquery/jquery.min.js"></script>
    <script src="/misc/scripts.js" ></script>

<title>GSE Timing Race Clock</title>
<meta name="description" content="GSE Timing Race Clock utility for use with Race Time and Meet Time software.">
<meta name="robots" content="noindex" />
</head>

<body>
<div class="container">
    <div class="bg-success">
        <a href="set_time.asp?event_id=1015&amp;race_id=1765&amp;software=Race Time">Set Time</a>
    </div>
    <h1 class="h1">GSE Race Clock</h1>

    <form role="form" class="form-inline" name="which_software" method="post" action="race_clock.asp">
    <select class="form-control" name="software" id="software" onchange="this.form.get_software.click()">
        <option value="">Select Software</option>
        
            <option value="Race Time" selected>Race Time</option>
            <option value="Meet Time">Meet Time</option>
        
    </select>
    <input type="hidden" name="submit_software" id="submit_software" value="submit_software">
    <input type="submit" class="form-control" name="get_software" id="get_software" value="Go">
    </form>

    
        <hr>

        <form role="form" class="form-inline" name="which_event" method="post" 
        action="race_clock.asp?software=Race Time">
        <select class="form-control" name="events" id="events" onchange="this.form.get_event.click()">
            <option value="">Select Event</option>
            
                    <option value="938">Fit For Life Trail Run</option>
                
                    <option value="943">Citizens Race 2 Raise</option>
                
                    <option value="1015" selected>Run for the Lake</option>
                
                    <option value="1027">Willie Walleye</option>
                
                    <option value="914">Celebration of Children</option>
                
                    <option value="999">Good Neighbor Days</option>
                
                    <option value="974">Stop the Trafficking</option>
                
                    <option value="979">Rum River Festival</option>
                
                    <option value="972">Perham Turtlefest</option>
                
                    <option value="1006">River Rat</option>
                
                    <option value="1003">Running 4 Ronald Charity</option>
                
                    <option value="961">Spud Fest Lakes Run</option>
                
                    <option value="924">Audreys Purple Dream</option>
                
                    <option value="1014">Firecracker 5K</option>
                
                    <option value="948">Apple Valley Freedom Days</option>
                
                    <option value="958">Baudette Firecracker</option>
                
                    <option value="988">Litchfield Watercade</option>
                
                    <option value="967">Monticello Riverfest</option>
                
                    <option value="1016">Big Ole SUPathon</option>
                
                    <option value="949">Roseau ALS 5k-10k</option>
                
                    <option value="970">Lucky Days</option>
                
                    <option value="983">Wright County Fair 5K</option>
                
                    <option value="1018">Xenia Marathon & Half</option>
                
                    <option value="1012">Giants Valley Run</option>
                
                    <option value="1023">The Dump Run</option>
                
                    <option value="954">Emotions in Motion</option>
                
                    <option value="926">Hanover Harvest Festival</option>
                
                    <option value="925">Great Up North Triathlon</option>
                
                    <option value="955">Yellow Rose-Warroad</option>
                
                    <option value="1022">Yellow Rose-Fargo</option>
                
                    <option value="963">Running of the Beef</option>
                
                    <option value="1007">Bluff Land Tri</option>
                
                    <option value="1000">Noahs Ark 5K</option>
                
                    <option value="930">Red Rooster Run</option>
                
                    <option value="931">Run of the Mill</option>
                
                    <option value="944">Circle the Lake</option>
                
                    <option value="968">Bertram-LaVallee Trail Run</option>
                
                    <option value="1002">Franny Flyer</option>
                
                    <option value="1008">DMCS Spooktacular</option>
                
                    <option value="935">Pumpkin Run</option>
                
                    <option value="937">Gray Ghost</option>
                
                    <option value="1011">STRIDE 5K</option>
                
                    <option value="1025">Tonka Turkey Trot</option>
                
                    <option value="1026">Turkey Day 5k</option>
                
                    <option value="965">IRIS Turkey Trot</option>
                
                    <option value="975">Snowflake Shuffle</option>
                
                    <option value="1013">Irish Scamper</option>
                
                    <option value="1021">Bunny Run</option>
                
                    <option value="1024">GOTR-Mankato</option>
                
                    <option value="994">Team Liam</option>
                
                    <option value="1009">Moose Run</option>
                
                    <option value="1019">Running of the Bays</option>
                
        </select>
        <input type="hidden" name="submit_event" id="submit_event" value="submit_event">
        <input type="submit" class="form-control" name="get_event" id="get_event" value="Go">
        </form>

        
            <hr>

            <form role="form" class="form-inline" name="which_race" method="post" 
            action="race_clock.asp?software=Race Time&amp;event_id=1015">
            <select class="form-control" name="races" id="races" onchange="this.form.get_race.click()">
                <option value="">Select Race</option>
                
                        <option value="1765" selected>5K (10:00am)</option>
                    
            </select>
            <input type="hidden" name="submit_race" id="submit_race" value="submit_race">
            <input type="submit" class="form-control" name="get_race" id="get_race" value="Go">
            </form>
        
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

            <hr>

            <h1 class="bg-danger" style="text-align:center;">
                <span id="timer-hours"></span>:<span id="timer-minutes"></span>:<span id="timer-seconds"></span>
            </h1>
            <script>
                const secPerMin = 60;
                const secPerHour = 3600;
                const secPerDay = 86400;
            
                class Timer {
                    constructor(startedTime, hrs, min, secs) {
                        // Store online time info, no date
                        this.startedTime = startedTime % secPerDay;
                        this.hours = hrs;
                        this.minutes = min;
                        this.seconds = secs;
                        this.intervalTimer = false;
                    }
            
                    stop() {
                        clearInterval(this.intervalTimer);
                    }
            
                    start() {
                        this.intervalTimer = setInterval(this.tick.bind(this), 1000);
                    }
            
                    render(time) {
                        // Format elapsed time
                        const hrs = Math.floor(time / secPerHour);
                        const min = Math.floor((time - (hrs * secPerHour)) / secPerMin);
                        const secs = (time - (hrs * secPerHour) - (min * secPerMin));
                        this.hours.innerText = ("00" + hrs).substr(-2);
                        this.minutes.innerText = ("00" + min).substr(-2);
                        this.seconds.innerText = ("00" + secs).substr(-2);
                    }
            
                    tick() {
                        // Get current time, ignore date info
                        const nowSeconds = Math.floor((Date.now() / 1000) % secPerDay);
                        // If current time if after started time then calculate elapsed time
                        if (nowSeconds >= this.startedTime) {
                            const time = nowSeconds - this.startedTime;
                            this.render(time);
                        }
                    }
                }
            
                // Only do this once, without jQuery - not on every tick
                const hrs_el = document.getElementById('timer-hours');
                const min_el = document.getElementById('timer-minutes');
                const secs_el = document.getElementById('timer-seconds');
            
                // Set your start time here - outside of your class - your class should
                // only operate on what it is given (Dependency Injection)
                const startTime = 35506;
                timer = new Timer(startTime, hrs_el, min_el, secs_el);
                timer.start();            
            </script>
        
</div>
</body>
</html>

Open in new window

Thanks, I loaded that page and it seems to be showing the time correctly.

I am currently seeing this - time seems ok? What am I looking for?

User generated image

ASKER

It's "working" except the time that it displays is not correct.

@Bob,

The start time seems off

const startTime = 35506;

Open in new window

Current UTC at time of writing this is 1621062045 (seconds).
If I plug this value in to your code above I get the correct results.

According to your earlier posts this is being loaded with this value

lngRaceStart

Open in new window

So the question is how is this being set.

Ok I see where that value comes from

Im using a test race that I "started" today at 35506 seconds

What you need to do is get the start of the Race time in UTC seconds and use that to seed the timer.