I created an accurate stopwatch timer for my new site and wrote about why here, now you can have it for free. HTML and CSS is included. Get it at github or just copy the code I provide here and use it however you want.
All I ask is for you to possibly check out the site it was originally built on. There, you can sign up for a free account and start storing your knowledge so you remember it forever. Or not. Either way, enjoy!
The Stopwatch
The stopwatch will start when the user clicks the play button and it will run every millisecond, displaying the full clock as 00:00:00:000 hours:minutes:seconds:milliseconds.
The HTML
<!DOCTYPE html><html><head> <title>Vanilla JS Stopwatch – Javascript Stopwatch</title> <link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Source+Sans+Pro:300″> <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.4.1/css/all.css” integrity=”sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz” crossorigin=”anonymous”><link rel=”stylesheet” href=”stopWatch.css”></head><body><div id=”timerContainer”><div class=”timer” onclick=”startTimer()”>Start Timer!</div><div class=”startTimer reset” onclick=”startTimer()” > <i class=”fas fa-play”></i> </div><div class=”pauseTimer reset” onclick=”pauseTimer()” > <i class=”fas fa-pause”></i> </div><div class=”resetTimer reset” onclick=”resetTimer()”>Reset</div></div><script type=”text/javascript” src=”stopWatch.js”></script></body></html>
There is a Font Awesome stylesheet included so that you can display a proper play and pause button.
I also included the Google Font that I like. You can change these, as well as any of the styles below, as you please.
The CSS
#timerContainer { font-family: ‘Source Sans Pro’, sans-serif; font-weight: 300; width:700px; margin:20px auto; min-height: 60px; border-top:0px;}.timer, .reset { float:left; width: 54%; padding: 20px 0; font-size: 24px; text-align:center; color: #fff; background: #A90000; cursor: pointer}.reset { background: #550000; color: white; width:14.9%; border-left: 1px solid #990000;}.reset:hover { background: #CC0000;}.lighter { background: #CC0000}
The Script
var startTimerButton = document.querySelector(‘.startTimer’);var pauseTimerButton = document.querySelector(‘.pauseTimer’);var timerDisplay = document.querySelector(‘.timer’);var startTime;var updatedTime;var difference;var tInterval;var savedTime;var paused = 0;var running = 0;function startTimer(){ if(!running){ startTime = new Date().getTime(); tInterval = setInterval(getShowTime, 1);// change 1 to 1000 above to run script every second instead of every millisecond. one other change will be needed in the getShowTime() function below for this to work. see comment there. paused = 0; running = 1;timerDisplay.style.background = “#FF0000”; timerDisplay.style.cursor = “auto”; timerDisplay.style.color = “yellow”; startTimerButton.classList.add(‘lighter’); pauseTimerButton.classList.remove(‘lighter’); startTimerButton.style.cursor = “auto”; pauseTimerButton.style.cursor = “pointer”; }}function pauseTimer(){ if (!difference){ // if timer never started, don’t allow pause button to do anything } else if (!paused) { clearInterval(tInterval); savedTime = difference; paused = 1; running = 0; timerDisplay.style.background = “#A90000”; timerDisplay.style.color = “#690000”; timerDisplay.style.cursor = “pointer”; startTimerButton.classList.remove(‘lighter’); pauseTimerButton.classList.add(‘lighter’); startTimerButton.style.cursor = “pointer”; pauseTimerButton.style.cursor = “auto”; } else {// if the timer was already paused, when they click pause again, start the timer againstartTimer(); }}function resetTimer(){ clearInterval(tInterval); savedTime = 0; difference = 0; paused = 0; running = 0; timerDisplay.innerHTML = ‘Start Timer!’; timerDisplay.style.background = “#A90000”; timerDisplay.style.color = “#fff”; timerDisplay.style.cursor = “pointer”; startTimerButton.classList.remove(‘lighter’); pauseTimerButton.classList.remove(‘lighter’); startTimerButton.style.cursor = “pointer”; pauseTimerButton.style.cursor = “auto”;}function getShowTime(){ updatedTime = new Date().getTime(); if (savedTime){ difference = (updatedTime – startTime) + savedTime; } else { difference = updatedTime – startTime; } // var days = Math.floor(difference / (1000 * 60 * 60 * 24)); var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((difference % (1000 * 60)) / 1000); var milliseconds = Math.floor((difference % (1000 * 60)) / 100);hours = (hours < 10) ? “0” + hours : hours; minutes = (minutes < 10) ? “0” + minutes : minutes; seconds = (seconds < 10) ? “0” + seconds : seconds; milliseconds = (milliseconds < 100) ? (milliseconds < 10) ? “00” + milliseconds : “0” + milliseconds : milliseconds; timerDisplay.innerHTML = hours + ‘:’ + minutes + ‘:’ + seconds + ‘:’ + milliseconds;}
If you run the script in seconds rather than milliseconds comment out the milliseconds code above.
The getShowTime() function is what is running every second.
The trick to all of this is to NOT depend on the setInterval() function to determine how much time has elapsed. So we will run getShowTime() every millisecond, but we will not assume that a millisecond has passed because browsers do not accurately time these events. Therefore, every time we run getShowTime() we check for the current time and minus it from the total amount of time elapsed since the script first started.
