How to Create a Simple Web Stopwatch with HTML and JavaScript
A simple but very useful project: a web-based stopwatch built with HTML and JavaScript. I'll also show you how you can adapt it to create an APK app for Android using Android Studio.
5/8/20252 min read
Stopwatch
This is the APK version of the stopwatch app.
It's only for Android. It's a simple, free, ad-free, small stopwatch that takes up little space.
Click the button below to download and then install it on your Android device:
Stopwatch APK
Screenshots
How to Create a Simple Web Stopwatch with HTML and JavaScript
Hello, all programming enthusiasts! This time, I want to share a simple but very useful project: a web stopwatch created with HTML and JavaScript. I'll also show you how you can adapt it to create an APK application for Android using Android Studio.
What are we going to build?
We're going to develop a digital stopwatch that allows you to:
• Start the countdown.
• Stop the countdown.
• Reset the timer to zero.
HTML Code: The Structure
HTML provides the basic structure of our web page. Here is the code we'll use:
HTML Explanation
• <head>: Contains the page title information and CSS styles.
• <body>: Defines the main content of the page.
• <h1>: The main title "Stopwatch".
• <div>: The element with the id "stopwatch" will display the time.
• <button>: Three buttons to start, stop, and reset the stopwatch, each with an onclick event that calls the corresponding JavaScript function.
• <style>: Contains CSS styles for the buttons.
JavaScript Code: The Logic
Now, we add the logic with JavaScript inside the <script> tag:
let milisegundos = 0;
let segundos = 0;
let minutos = 0;
let intervalo;
function iniciar() {
intervalo = setInterval(() => {
milisegundos++;
if (milisegundos === 10) {
milisegundos = 0;
segundos++;
}
if (segundos === 60) {
segundos = 0;
minutos++;
}
if (minutos === 60) {
minutos = 0;
}
document.getElementById('cronometro').textContent = `${minutos.toString().padStart(2, '0')}:${segundos.toString().padStart(2, '0')}.${milisegundos.toString().padStart(2, '0')}`;
}, 100);
}
function detener() {
clearInterval(intervalo);
}
function reiniciar() {
detener();
milisegundos = 0;
segundos = 0;
minutos = 0;
document.getElementById('cronometro').textContent = '00:00.00';
}
JavaScript Explanation
• Variables: Declare the milliseconds, seconds, minutes, and interval variables to store the time and interval of the stopwatch.
• iniciar() Function:
◦ Use setInterval() to update the stopwatch every 100 milliseconds.
◦ Increments the milliseconds and updates the seconds and minutes as needed.
◦ padStart(2, '0') ensures that numbers always have two digits (e.g., "01" instead of "1").
◦ Updates the content of the HTML element with the id "stopwatch".
• detener() Function: Use clearInterval() to stop the interval and pause the stopwatch.
• reiniciar () Function:
◦ Stops the interval.
◦ Resets the time variables to zero.
◦ Updates the stopwatch content to "00:00.00".
CSS Styles: The Presentation
CSS is used to style HTML elements and make the stopwatch look attractive. In this case, styles are applied to the buttons and the stopwatch display.
Creating the APK with Android Studio
To convert this web app into an Android APK, you can follow these general steps:
• Android Studio: Install Android Studio on your computer.
• New Project: Create a new project in Android Studio.
• WebView: Use a WebView component to load your HTML file.
• Configuration: Configure permissions and other settings needed for your app.
• Generate APK: Generate the signed APK file for distribution.
Conclusion
This stopwatch project is an excellent example of how HTML, CSS, and JavaScript can work together to create a functional and interactive tool. Plus, with Android Studio, you can bring your web apps to the mobile world.
I hope this tutorial is helpful! If you have any questions, please feel free to leave a comment.
Innovation
We develop installable and accessible web applications.
© 2025. All rights reserved.
