JavaScript Lesson Start and Stop Timer GetTime For Timer using Date

GetTime For Timer using Date
How to set up a timer based on a JavaScript Date object. This project will create a set of buttons that can start and stop a timer. The timer values are based on the ECMAScript epoch from the Date object in JavaScript that can be returned using getTime(). This format will provide a more exact time calculation as the time will be returned and calculated.

Select the page elements and create a start and stop button. If you create the elements in JavaScript like the code below you can also set the styling with the element style object properties.

1. Set up a global object that can be used to hold the full start and stop times. The object named game can be selected within the code as its global, and can have property values set since it's an object. The game timer can be used to hold the interval for the update of the time display.

2. Add the event listeners to the buttons. Disable the stop button so there is only one option. Below the code will add them as event listeners, listening for the click on the button.

3. Set up the functions to start and stop the timer. Toggle the buttons to be disabled for the start, so it cannot be clicked again. And the stop should be enabled. Get the current new Date() value, then get the value of the getTime() which will return the time in milliseconds since the ECMAScript epoch. (which is defined as January 1, 1970, UTC)

5. Adding the display can be done with a function that will calculate the time passed on a set interval. Create a function named showTimer() and add it to be invoked on the start button click.

7. Get the current time, and subtract the start time. This will give a value in milliseconds as to how long the timer is running. Since the minutes is the largest time value, get the minutes removing the seconds and milliseconds by dividing them from the difference.

8. Update the minutes to add an extra zero if the value is less than 10.

9. Get the value of seconds, by dividing the difference. If the value of the seconds is greater than 60, then get the modulus remainder using %=. Update the extra 0 with a condition.

10. Get the milliseconds by using the %= which will return the remainder of the value once divided by 1000.

11. Output the values for the visible display to the user.

Course content web development and web design courses with coding examples and source code for the lesson content. Source Code is available within my Github account. Lessons posted are designed to help students learn more about a specific topic related to modern web development and applying code.
Laurence Svekis is a professional top selling course author having instructed over 1 Million students both online and in person. Laurence Svekis is a Google Developer Expert specializing in Google Workspace automation using Google Apps Script Code.

Tags and Keywords

#AppsScript #googlesheets #workspace #accounting #finance #automation modern web design online course #onlinecourses #modernwebdesign #tips #appsscript #coding #codingtutorial #script #scriptinghelp #google #Viral #subscribe #helping #GoogleAppsScript #Gmail #Attachments #Spreadsheet #Automation #GmailAttachments #GoogleAppsScript #EmailProductivity #Automation #SpreadsheetLogs #AttachmentDetails #TechTips #ProductivityHacks #GoogleDrive #GmailSearch #GoogleAppsScript #Spreadsheet #Email #Automation #Iteration #subscribe
#GoogleSheets #GoogleAppsScript #CustomUIMenu #SpreadsheetTips #ProductivityTips #TechTutorial #CodingTutorial #BeginnerFriendly #StepByStepGuide

[chantingdroneflutes]

Hi Laurence, thank you for the tut. Though have you let the timer actually run for more than a minute? When I do, it starts acting weird after a minute, the seconds are not showing up properly once the minute shows 01 ...
The seconds start with a zero afterward but not as a double digit...