Как создать таймер кубирования: примеры HTML, CSS, JavaScript и Python

Таймер кубика — это термин, используемый для описания таймера, используемого в спидкубинге, который представляет собой задачу максимально быстрого решения кубика Рубика или подобных головоломок. Ниже я предоставлю вам несколько методов создания таймера кубирования, а также примеры кода.

Метод 1: таймер HTML, CSS и JavaScript
Этот метод использует HTML, CSS и JavaScript для создания базового таймера, который запускает, останавливает и отображает прошедшее время.

HTML:

<div id="timer">00:00:00</div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>

CSS:

#timer {
  font-size: 48px;
  font-weight: bold;
}
button {
  margin-top: 10px;
}

JavaScript:

let startTime;
let timerInterval;
function startTimer() {
  startTime = Date.now();
  timerInterval = setInterval(updateTimer, 1000);
  document.getElementById("startBtn").disabled = true;
}
function stopTimer() {
  clearInterval(timerInterval);
  document.getElementById("startBtn").disabled = false;
}
function updateTimer() {
  const elapsedTime = Date.now() - startTime;
  const formattedTime = formatTime(elapsedTime);
  document.getElementById("timer").textContent = formattedTime;
}
function formatTime(time) {
  const seconds = Math.floor(time / 1000) % 60;
  const minutes = Math.floor(time / 1000 / 60) % 60;
  const hours = Math.floor(time / 1000 / 60 / 60);
  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}
function pad(value) {
  return value.toString().padStart(2, "0");
}
document.getElementById("startBtn").addEventListener("click", startTimer);
document.getElementById("stopBtn").addEventListener("click", stopTimer);

Метод 2: таймер Python с использованием Tkinter
Этот метод использует библиотеку Tkinter в Python для создания таймера графического пользовательского интерфейса (GUI).

import tkinter as tk
import time
class TimerApp:
    def __init__(self, root):
        self.root = root
        self.timer_running = False
        self.start_time = 0
        self.timer_label = tk.Label(root, text="00:00:00", font=("Arial", 48))
        self.timer_label.pack()
        self.start_button = tk.Button(root, text="Start", command=self.start_timer)
        self.start_button.pack()
        self.stop_button = tk.Button(root, text="Stop", command=self.stop_timer)
        self.stop_button.pack()
    def start_timer(self):
        if not self.timer_running:
            self.timer_running = True
            self.start_time = time.time()
            self.update_timer()
    def stop_timer(self):
        if self.timer_running:
            self.timer_running = False
    def update_timer(self):
        if self.timer_running:
            elapsed_time = time.time() - self.start_time
            formatted_time = self.format_time(elapsed_time)
            self.timer_label.configure(text=formatted_time)
            self.root.after(1000, self.update_timer)
    @staticmethod
    def format_time(time):
        seconds = int(time) % 60
        minutes = int(time / 60) % 60
        hours = int(time / 3600)
        return f"{hours:02d}:{minutes:02d}:{seconds:02d}"
root = tk.Tk()
app = TimerApp(root)
root.mainloop()