How to Create a Stopwatch ?
SEO Help and Tips
How to create a Stopwatch ?
Here's the example code for Stop Watch.
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
#stopwatch {
font-size: 48px;
margin-top: 30px;
}
#controls {
margin-top: 20px;
}
button {
font-size: 18px;
padding: 10px 20px;
margin: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="stopwatch">00:00:00</div>
<div id="controls">
<button id="startButton">Start</button>
<button id="stopButton" disabled>Stop</button>
<button id="resetButton">Reset</button>
</div>
<script>
const stopwatch = document.getElementById("stopwatch");
const startButton = document.getElementById("startButton");
const stopButton = document.getElementById("stopButton");
const resetButton = document.getElementById("resetButton");
let startTime = 0;
let intervalId = null;
startButton.addEventListener("click", start);
stopButton.addEventListener("click", stop);
resetButton.addEventListener("click", reset);
function start() {
startTime = Date.now() - (startTime > 0 ? startTime : 0);
intervalId = setInterval(updateStopwatch, 10);
startButton.disabled = true;
stopButton.disabled = false;
}
function stop() {
clearInterval(intervalId);
intervalId = null;
startButton.disabled = false;
stopButton.disabled = true;
}
function reset() {
clearInterval(intervalId);
intervalId = null;
startTime = 0;
updateStopwatchDisplay(0);
startButton.disabled = false;
stopButton.disabled = true;
}
function updateStopwatch() {
const currentTime = Date.now() - startTime;
updateStopwatchDisplay(currentTime);
}
function updateStopwatchDisplay(timeInMilliseconds) {
const hours = Math.floor(timeInMilliseconds / 3600000);
const minutes = Math.floor((timeInMilliseconds % 3600000) / 60000);
const seconds = Math.floor((timeInMilliseconds % 60000) / 1000);
const milliseconds = Math.floor((timeInMilliseconds % 1000) / 10);
stopwatch.textContent = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}.${formatTime(milliseconds)}`;
}
function formatTime(value) {
return value < 10 ? "0" + value : value;
}
</script>
</body>
Python:
import tkinter as tk
import time
class ColorfulStopwatch:
def __init__(self, root):
self.root = root
self.root.title("Colorful Stopwatch")
self.running = False
self.start_time = None
self.time_label = tk.Label(root, text="00:00:00", font=("Helvetica", 48))
self.time_label.pack(pady=20)
self.start_button = tk.Button(root, text="Start", command=self.start)
self.start_button.pack(side=tk.LEFT, padx=10)
self.stop_button = tk.Button(root, text="Stop", command=self.stop)
self.stop_button.pack(side=tk.LEFT, padx=10)
self.reset_button = tk.Button(root, text="Reset", command=self.reset)
self.reset_button.pack(side=tk.LEFT, padx=10)
self.update_time()
def update_time(self):
if self.running:
elapsed_time = int(time.time() - self.start_time)
hours, remainder = divmod(elapsed_time, 3600)
minutes, seconds = divmod(remainder, 60)
time_string = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
self.time_label.config(text=time_string)
self.root.after(1000, self.update_time)
def start(self):
if not self.running:
self.running = True
self.start_time = time.time()
def stop(self):
if self.running:
self.running = False
def reset(self):
self.running = False
self.start_time = None
self.time_label.config(text="00:00:00")
if __name__ == "__main__":
root = tk.Tk()
stopwatch = ColorfulStopwatch(root)
root.mainloop()
Comments
Post a Comment
Thanks for your Comments.