Avatar of Bob Schneider
Bob Schneider
Flag for United States of America asked on

Finishing Touches on Race Clock

Hi.  I am tryinmg to put the finishing touches on a web-based race clock.  It is not working for me.  The problem appears to be the value I am placing into the JS script.  

Here is the classic asp:
[code]
dRaceTime = Date & " " & ConvertToMinutes(Round(lngRaceStart + sngStartTime, 0))  'remove tenths
dRaceTime = Left(dRaceTime, Len(dRaceTime) - 2)  'truncate to remove ".0"
dRaceStart = DateDiff("s","1/1/1970 00:00:00", dRaceTime) * 1000  'convert to milliseconds
[/code]

js...pretty sure it is correct...not my code
[code]
            <script>
                var TTimer = {
                    startedTime: <%=dRaceStart%>,
                    restoredFromSession: false,
                    started: false,
                    minutes: 0,
                    seconds: 0,
                    
                    tick: function tick() {
                    // Since setInterval is not reliable in inactive windows/tabs we are using date diff.
                    var diffInSeconds = Math.floor((new Date() - this.startedTime) / 1000);
                    this.minutes = Math.floor(diffInSeconds / 60);
                    this.seconds = diffInSeconds - this.minutes * 60;
                    this.render();
                    this.updateSession();
                    },
                    
                    utilities: {
                    pad: function pad(number) {
                        return number < 10 ? '0' + number : number;
                    }
                    },
                    
                    container: function container() {
                    return $(document);
                    },
                    
                    render: function render() {
                    this.container().find('#timer-minutes').text(this.utilities.pad(this.minutes));
                    this.container().find('#timer-seconds').text(this.utilities.pad(this.seconds));
            
                    },
                    
                    updateSession: function updateSession() {
                    sessionStorage.setItem('timerStartedTime', this.startedTime);
                    },
                    
                    clearSession: function clearSession() {
                    sessionStorage.removeItem('timerStartedTime');
                    },
                    
                    restoreFromSession: function restoreFromSession() {
                    // Using sessionsStorage to make the timer persistent
                    if (typeof Storage == "undefined") {
                        console.log('No sessionStorage Support');
                        return;
                    }
            
                    if (sessionStorage.getItem('timerStartedTime') !== null) {
                        this.restoredFromSession = true;
                        this.startedTime = new Date(sessionStorage.getItem('timerStartedTime'));
                    }
                    },
                    
                    start: function start() {
                    this.restoreFromSession();
                    this.stop();
                    this.started = true;
                    this.tick();
                    this.timerId = setInterval(this.tick.bind(this), 1000);
                    },
                    
                    stop: function stop() {
                    this.started = false;
                    clearInterval(this.timerId);
                    this.render();
                    }
                };
            
                TTimer.start();
            </script>
[/code]


ASPJavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Jonathan D.

It is not working for me.

What is not working for you? what is the input and expected output? you can't just paste code here and expect us to review it and know the problem without understanding your requirements.
Bob Schneider

ASKER
My mistake.  I have a utility that displays the running time on a “digital clock”.  I have replaced the JavaScript function “new Date()” with the time the race started.  It represents milliseconds since 1/1/1970 since I believe that is how the js f


ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Bob Schneider

ASKER
Thank you very much!  What type of input is the function expecting from me for 'timerStartedTime'?  I am currently giving it time of day as hh:mm:ss
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Julian Hansen

It is much easier if you give it UnixTime (in seconds). It saves you having to do a bunch of conversions.
Bob Schneider

ASKER
Thank you.  I now have it using the time of day in seconds that the race started (33003 for a race that started at 9:10:03), but the clock still starts at 00:00 rather than the elapsed time since the race started.  What am I doing wrong?

[code]
                const startTime = sessionStorage.getItem('<%=lngRaceStart%>') || Math.floor(Date.now() / 1000);
                timer = new Timer(startTime, min_el, secs_el)
                timer.start();            
[/code]

Thank you for your patience and help!
Julian Hansen

You are welcome Bob,

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.