Get started with TimeMe.js CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with TimeMe.js CDN - cdnhub.io</title>
    <script src="https://cdn.cdnhub.io/TimeMe.js/2.0.0/timeme.min.js"></script>
</head>
<body>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>
    <p id="timer"></p>

    <script>
        const startButton = document.getElementById('start');
        const stopButton = document.getElementById('stop');
        const resetButton = document.getElementById('reset');
        const timerDisplay = document.getElementById('timer');

        let timer;

        startButton.addEventListener('click', () => {
            timer = new TimeMe({
                onStart: () => {
                    startButton.disabled = true;
                    stopButton.disabled = false;
                },
                onEnd: () => {
                    startButton.disabled = false;
                    stopButton.disabled = true;
                },
                onTick: (time) => {
                    timerDisplay.textContent = formatTime(time);
                },
            });

            timer.start();
        });

        stopButton.addEventListener('click', () => {
            timer.stop();
        });

        resetButton.addEventListener('click', () => {
            timer.reset();
            startButton.disabled = false;
            stopButton.disabled = true;
            timerDisplay.textContent = '00:00:00';
        });

        function formatTime(time) {
            const minutes = Math.floor(time / 60000);
            const seconds = Math.floor((time % 60000) / 1000);
            const milliseconds = Math.floor((time % 1000) / 10);

            return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${milliseconds.toString().padStart(3, '0')}`;
        }
    </script>
</body>
</html>
Get started with TimeMe.js CDN

Stable version

How to start using TimeMe.js CDN

All versions
