forks

Creation chat

ClarkZhang
make me a stop watch
02-28 01:00

登录 后可以评论

Assistant
(HTML code has been generated and updated; see above for the current version.) This stopwatch features: 1. Modern design with dark/light mode toggle 2. Large, easy-to-read time display 3. Start/Pause/Reset controls 4. Lap time recording functionality 5. Responsive layout that works on mobile and desktop 6. Smooth animations and transitions 7. Persistent theme preference using localStorage 8. Touch-friendly buttons with proper sizing 9. Lap times displayed in a scrollable list 10. Console logging for debugging purposes The stopwatch tracks time in minutes, seconds, and hundredths of seconds. You can start, pause, reset, and record lap times. The lap times are displayed in a list that scrolls when there are many entries. To use: - Click "Start" to begin timing - Click "Pause" to pause the timer - Click "Reset" to reset to zero - Click "Lap" to record current time while running The theme toggle in the top-right corner switches between light and dark modes. Your preference is saved automatically. Note: There's a Console panel in the bottom-right of the preview where you can see logs from the stopwatch application. You can copy logs from there and paste them back into the chat for debugging if needed.
▼ Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stopwatch</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>tailwind.config = { darkMode: 'class' }</script>
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 flex flex-col items-center justify-center p-4">
    <!-- Theme toggle -->
    <button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
        <svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
        <svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
    </button>
    <script>
    function toggleTheme(){ var el=document.documentElement; var isDark=!el.classList.contains('dark'); el.classList.toggle('dark',isDark); localStorage.setItem('theme',isDark?'dark':'light'); applyTheme(isDark); }
    function applyTheme(isDark){ document.getElementById('icon-moon').style.display=isDark?'none':'block'; document.getElementById('icon-sun').style.display=isDark?'block':'none'; }
    document.addEventListener('DOMContentLoaded',function(){ var saved=localStorage.getItem('theme'); var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark',isDark); applyTheme(isDark); });
    </script>

    <div class="w-full max-w-md bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6 md:p-8">
        <h1 class="text-3xl font-bold text-center mb-2">Stopwatch</h1>
        <p class="text-slate-600 dark:text-slate-400 text-center mb-8">Track time with precision</p>
        
        <div class="flex justify-center mb-8">
            <div class="text-6xl font-mono font-bold bg-slate-100 dark:bg-slate-700 rounded-xl px-6 py-4 w-full text-center">
                <span id="minutes">00</span>:<span id="seconds">00</span>.<span id="milliseconds">00</span>
            </div>
        </div>
        
        <div class="grid grid-cols-3 gap-4">
            <button id="start-btn" class="bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-semibold py-3 rounded-lg transition-colors touch-manipulation">
                Start
            </button>
            <button id="pause-btn" class="bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold py-3 rounded-lg transition-colors touch-manipulation hidden">
                Pause
            </button>
            <button id="reset-btn" class="bg-slate-600 hover:bg-slate-700 dark:bg-slate-500 dark:hover:bg-slate-600 text-white font-semibold py-3 rounded-lg transition-colors touch-manipulation">
                Reset
            </button>
            <button id="lap-btn" class="col-span-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-3 rounded-lg transition-colors touch-manipulation">
                Lap
            </button>
        </div>
        
        <div class="mt-8 max-h-60 overflow-y-auto">
            <h2 class="text-xl font-semibold mb-3">Lap Times</h2>
            <ul id="lap-times" class="space-y-2">
                <!-- Lap times will be added here -->
            </ul>
        </div>
    </div>

    <script>
        // DOM elements
        const minutesElement = document.getElementById('minutes');
        const secondsElement = document.getElementById('seconds');
        const millisecondsElement = document.getElementById('milliseconds');
        const startButton = document.getElementById('start-btn');
        const pauseButton = document.getElementById('pause-btn');
        const resetButton = document.getElementById('reset-btn');
        const lapButton = document.getElementById('lap-btn');
        const lapTimesList = document.getElementById('lap-times');
        
        // Stopwatch variables
        let startTime = 0;
        let elapsedTime = 0;
        let timerInterval = null;
        let isRunning = false;
        let lapCount = 1;
        
        // Format time values to always have two digits
        function formatTime(value) {
            return value.toString().padStart(2, '0');
        }
        
        // Update the display with current time
        function updateDisplay() {
            const totalMilliseconds = elapsedTime;
            const minutes = Math.floor(totalMilliseconds / 60000);
            const seconds = Math.floor((totalMilliseconds % 60000) / 1000);
            const milliseconds = Math.floor((totalMilliseconds % 1000) / 10);
            
            minutesElement.textContent = formatTime(minutes);
            secondsElement.textContent = formatTime(seconds);
            millisecondsElement.textContent = formatTime(milliseconds);
        }
        
        // Start the stopwatch
        function start() {
            if (!isRunning) {
                startTime = Date.now() - elapsedTime;
                timerInterval = setInterval(() => {
                    elapsedTime = Date.now() - startTime;
                    updateDisplay();
                }, 10);
                isRunning = true;
                
                startButton.classList.add('hidden');
                pauseButton.classList.remove('hidden');
                lapButton.disabled = false;
            }
        }
        
        // Pause the stopwatch
        function pause() {
            if (isRunning) {
                clearInterval(timerInterval);
                isRunning = false;
                
                pauseButton.classList.add('hidden');
                startButton.classList.remove('hidden');
            }
        }
        
        // Reset the stopwatch
        function reset() {
            clearInterval(timerInterval);
            isRunning = false;
            elapsedTime = 0;
            lapCount = 1;
            
            updateDisplay();
            
            startButton.classList.remove('hidden');
            pauseButton.classList.add('hidden');
            lapButton.disabled = false;
            
            // Clear lap times
            lapTimesList.innerHTML = '';
        }
        
        // Record a lap time
        function recordLap() {
            if (isRunning) {
                const totalMilliseconds = elapsedTime;
                const minutes = Math.floor(totalMilliseconds / 60000);
                const seconds = Math.floor((totalMilliseconds % 60000) / 1000);
                const milliseconds = Math.floor((totalMilliseconds % 1000) / 10);
                
                const lapTime = `${formatTime(minutes)}:${formatTime(seconds)}.${formatTime(milliseconds)}`;
                
                const lapItem = document.createElement('li');
                lapItem.className = 'flex justify-between items-center bg-slate-100 dark:bg-slate-700 p-3 rounded-lg';
                lapItem.innerHTML = `
                    <span>Lap ${lapCount}</span>
                    <span class="font-mono">${lapTime}</span>
                `;
                
                lapTimesList.prepend(lapItem);
                lapCount++;
            }
        }
        
        // Event listeners
        startButton.addEventListener('click', start);
        pauseButton.addEventListener('click', pause);
        resetButton.addEventListener('click', reset);
        lapButton.addEventListener('click', recordLap);
        
        // Initialize display
        updateDisplay();
        
        // Log to console for debugging
        console.log('Stopwatch initialized');
    </script>
</body>
</html>
02-28 01:01

登录 后可以评论

Comments

登录 后可以评论