×

注意!页面内容来自https://time.you/timer/,本站不储存任何内容,为了更好的阅读体验进行在线解析,若有广告出现,请及时反馈。若您觉得侵犯了您的利益,请通知我们进行删除,然后访问 原网页

<> :root { --sw-bg: #f8f9fa; --sw-text: #212529; --sw-secondary-text: #6c757d; --sw-border: #dee2e6; --sw-button-bg: #fff; --sw-button-disabled-bg: #e9ecef; --sw-modal-bg: #ffffff; --sw-restore-bg: #fff3cd; --sw-restore-border: #ffe69c; --sw-restore-text: #664d03; --timer-progress-fg: #dc3545; --timer-progress-bg: #e9ecef; --timer-finished-bg: #d1e7dd; --timer-finished-border: #a3cfbb; --timer-finished-text: #0a3622; } /* Dark mode variables ONLY for the timer app itself and body (if other general dark s are needed from body) */ .timer-app-container.dark-modebody.dark-mode { --sw-bg: #1e1e1e; --sw-text: #e0e0e0; --sw-secondary-text: #a0a0a0; --sw-border: #3a3a3a; --sw-button-bg: #2c2c2e; --sw-button-disabled-bg: #3a3a3a; --sw-modal-bg: #2c2c2e; --timer-progress-fg: #e65252; --timer-progress-bg: #3a3a3a; --timer-finished-bg: #143620; --timer-finished-border: #2a6f47; --timer-finished-text: #a3cfbb; } .timer-app-wrapper { width: 100%; } #restore-banner { display: none; background-color: var(--sw-restore-bg); border: 1px solid var(--sw-restore-border); color: var(--sw-restore-text); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; text-align: left; position: relative; } .restore-content p { margin: 0 0 0.75rem 0; } .restore-content strong { color: var(--sw-restore-text); font-weight: bold; } #restore-banner .close-restore { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; font-weight: bold; color: var(--sw-restore-text); cursor: pointer; border: none; background: none; opacity: 0.7; } #restore-btn { background-color: #0d6efd; color: white; border: 1px solid #0d6efd; } #delete-restore-btn { background-color: #fff; color: #0d6efd; border: 1px solid #dee2e6; } #restore-banner button { padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 500; margin-right: 10px; } .timer-app-container { position: relative; width: 100%; padding: 2rem; padding-top: 4.5rem; background-color: var(--sw-bg); border: 1px solid var(--sw-border); border-radius: 12px; font-family: -apple-systemBlinkMacSystemFont"Segoe UI"Robotosans-serif; color: var(--sw-text); text-align: center; box-sizing: border-box; transition: background-color 0.3s easecolor 0.3s easeborder-color 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .utility-bar { position: absolute; top: 1.5rem; right: 1.5rem; display: flex; gap: 10px; z-index: 999; } .utility-bar button { background: none; border: none; color: var(--sw-secondary-text); padding: 6px; border-radius: 50%; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .utility-bar button:hover { background-color: rgba(1281281280.15); } .timer-app-container.dark-mode .utility-bar button:hover { background-color: rgba(2002002000.1); } .utility-bar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .utility-bar .icon-dark-mode.timer-app-container:not(.dark-mode) .icon-light-mode { display: none; } .timer-app-container.dark-mode .icon-dark-mode { display: block; } .timer-app-container:not(.dark-mode) .icon-light-mode { display: block; } .utility-bar .icon-exit-fullscreen.timer-app-container:not(.is-fullscreen) .icon-enter-fullscreen { display: none; } .timer-app-container.is-fullscreen .icon-exit-fullscreen { display: block; } .timer-app-container:not(.is-fullscreen) .icon-enter-fullscreen { display: block;} .utility-bar .icon-sound-off { display: none; } #sound-toggle-btn.sound-off .icon-sound-off { display: block; } #sound-toggle-btn.sound-off .icon-sound-on { display: none; } #timer-container { width: 100%; display: flex; justify-content: center; align-items: center; flex-grow: 1; } .timer-content-block { width: 100%; max-width: 700px; display: flex; flex-direction: column; align-items: center; } .timer-header { display: flex; justify-content: center; align-items: center; margin-bottom: 1.5rem; width:100%; } .timer-name-input { font-size: 1.25rem; font-weight: 500; border: none; background: transparent; color: var(--sw-text); padding: 8px; border-radius: 4px; width: auto; max-width:80%; text-align: center;} .timer-name-input:focus { outline: none; box-shadow: 0 0 0 2px var(--sw-border); background-color: var(--sw-bg); } .timer-app-container.dark-mode .timer-name-input:focus { background-color: var(--sw-button-disabled-bg); } .timer-duration-set { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 1.5rem; flex-wrap: wrap; width:100%;} .duration-input-group { display: flex; align-items: center; gap: 5px; } .timer-duration-set input[type="number"] { width: 70px; padding: 10px 12px; font-size: 1.1rem; text-align: center; border: 1px solid var(--sw-border); border-radius: 6px; background-color: var(--sw-bg); color: var(--sw-text); -moz-appearance: textfield; } .timer-app-container.dark-mode .timer-duration-set input[type="number"] { background-color: var(--sw-button-disabled-bg); } .timer-duration-set input[type="number"]::-webkit-outer-spin-button, .timer-duration-set input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .timer-duration-set label { font-size: 1rem; color: var(--sw-secondary-text); } .timer-display { font-family: "SF Mono""Fira Code"monospace; font-size: clamp(3.5rem10vw6rem); font-weight: 300; margin-bottom: 0.5rem; color: var(--sw-text); line-height: 1; } .timer-exceeded-display { display: none; font-size: 0.9rem; margin-top:0; margin-bottom: 1rem; color: var(--sw-secondary-text); } .timer-progress-bar-container { width: 100%; max-width:400px; height: 16px; background-color: var(--timer-progress-bg); border-radius: 8px; overflow: hidden; margin-bottom: 2rem; } .timer-progress-bar { height: 100%; width: 100%; background-color: var(--timer-progress-fg); border-radius: 8px; transition: width 0.2s linear; } .timer-controls { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .timer-controls button { min-width: 120px; padding: 0.8rem 1.8rem; border-radius: 30px; border: 2px solid var(--sw-border); font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; background-color: var(--sw-button-bg); color: var(--sw-text); } .timer-app-container.dark-mode .timer-controls button { background-color: var(--sw-button-bg); color: var(--sw-text); border-color: var(--sw-secondary-text); } .timer-controls button.btn-start { background-color: #198754; border-color: #198754; color: white; } .timer-controls button.btn-pause { background-color: #ffc107; border-color: #ffc107; color: #212529; } .timer-app-container.dark-mode .timer-controls button.btn-start { border-color: #198754; } .timer-app-container.dark-mode .timer-controls button.btn-pause { border-color: #ffc107; } .timer-controls button:disabled { background-color: var(--sw-button-disabled-bg); border-color: var(--sw-border); color: var(--sw-secondary-text); cursor: not-allowed; } .timer-app-container.is-finished-visual { background-color: var(--timer-finished-bg); border-color: var(--timer-finished-border); } .timer-app-container.is-finished-visual .timer-name-input, .timer-app-container.is-finished-visual .timer-display, .timer-app-container.is-finished-visual .timer-exceeded-display, .timer-app-container.is-finished-visual .timer-duration-set label { color: var(--timer-finished-text); } .timer-app-container.is-finished-visual .timer-name-input[readonly] { color: var(--timer-finished-text); opacity: 0.75; background-color: transparent; } .timer-app-container.is-finished-visual .timer-duration-set input[type="number"][disabled] { color: var(--timer-finished-text); opacity: 0.75; } .timer-app-container.dark-mode.is-finished-visual .timer-name-input[readonly] { color: var(--timer-finished-text); opacity: 0.75; background-color: transparent; } .timer-app-container.dark-mode.is-finished-visual .timer-duration-set input[type="number"][disabled] { color: var(--timer-finished-text); opacity: 0.75; } .timer-app-container.is-finished-visual .timer-progress-bar { background-color: var(--timer-finished-text); opacity: 0.7; } /* Fullscreen Styles */ .timer-app-container.is-fullscreen { padding: 2vmin; justify-content: center; height: 100%; width: 100%; overflow: hidden; } .timer-app-container.is-fullscreen #timer-container { width: 100%; height: 100%; max-width: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } .timer-app-container.is-fullscreen .timer-content-block { width: auto; min-width: min(80vw90%); max-width: min(95vw100%); height: auto; padding: 4vmin; } .timer-app-container.is-fullscreen .timer-header { margin-bottom: 2vmin; } .timer-app-container.is-fullscreen .timer-name-input { font-size: 5vmin; } .timer-app-container.is-fullscreen .timer-duration-set { gap: 2vmin; margin-bottom: 3vmin; flex-direction: row; flex-wrap: nowrap; } .timer-app-container.is-fullscreen .duration-input-group input[type="number"] { width: 10vmin; font-size: 4vmin; padding: 1.5vmin; } .timer-app-container.is-fullscreen .duration-input-group label { font-size: 3.5vmin; } .timer-app-container.is-fullscreen .timer-display { font-size: clamp(15vmin25vh30vmin); margin-bottom: 1vmin; } .timer-app-container.is-fullscreen .timer-exceeded-display { font-size: 4vmin; margin-bottom: 2vmin; } .timer-app-container.is-fullscreen .timer-progress-bar-container { height: 3vmin; margin-bottom: 3vmin; width: 70%; max-width: 600px;} .timer-app-container.is-fullscreen .timer-controls { gap: 3vmin; } .timer-app-container.is-fullscreen .timer-controls button { min-width: 20vmin; padding: 2vmin 4vmin; font-size: 4vmin; border-radius: 6vmin; } .timer-app-container.is-fullscreen .utility-bar { top: 2vmin; right: 2vmin; } .timer-app-container.is-fullscreen .utility-bar button { width: 6vmin; height: 6vmin; } .timer-app-container.is-fullscreen .utility-bar svg { width: 3.5vmin; height: 3.5vmin; } /* Mobile Responsive Styles */ @media (max-width: 767px) { .timer-app-container { padding: 1rem; padding-top: 4.5rem; } .timer-content-block { max-width: 100%; } .timer-name-input { font-size: 1.1rem; } .timer-duration-set input[type="number"] { width: 60px; padding: 8px 10px; font-size: 1rem; } .timer-display { font-size: 3rem; } .timer-controls button { min-width: 100px; padding: 0.7rem 1.5rem; font-size: 1rem; } .timer-app-container.is-fullscreen .timer-content-block { padding: 2vmin; } .timer-app-container.is-fullscreen .timer-display { font-size: clamp(18vmin22vh25vmin); } .timer-app-container.is-fullscreen .duration-input-group input[type="number"] { width: 12vmin; font-size: 4vmin; } .timer-app-container.is-fullscreen .timer-controls button { font-size: 3.5vmin; } } /* === Guide Section Styles - ALWAYS Light Mode Appearance === */ .timer-guide-container { margin-top: 40px; border-radius: 12px; line-height: 1.7; color: #212529; /* Explicitly set base text color for the guide (like :root --sw-text) */ } .timer-guide-container h2 { font-weight: 500; border-bottom: 2px solid #e0e0e0; /* Light mode border color */ padding-bottom: 10px; margin-bottom: 20px; color: #2c3e50; /* Specific heading color for light mode */ } .timer-guide-container h3 { font-weight: 500; margin-top: 30px; margin-bottom: 15px; color: #2c3e50; /* Specific heading color for light mode */ } .timer-guide-container h4 { font-weight: bold; margin-top: 20px; margin-bottom: 5px; color: #34495e; /* Specific heading color for light mode */ } .timer-guide-container p .timer-guide-container li { color: #34495e; /* Standard text color for light mode */ } .timer-guide-container ol .timer-guide-container ul { padding-left: 25px; } .timer-guide-container li { margin-bottom: 10px; } .timer-guide-container strong { color: #198754; /* Light mode strong color */ }

Restore previous timer?

<> /* Styles transplanted from alarm page and class names adapted */ .related-preset-timers-section { margin-top: 40px; /* From alarm */ padding: 0 15px; /* Retain side paddingalarm section has overall 20px padding on its container */ /* background-color and border removed as per alarm page */ /* margin-bottom is handled by the list or overall layout */ } .related-preset-timers-list { list-: none; padding-left: 0; display: flex; flex-wrap: wrap; justify-content: left; /* Center the pills */ gap: 10px; /* From alarm */ margin-bottom: 15px; /* From alarm */ } .related-preset-timers-list:last-child { margin-bottom: 0; /* From alarm */ } /* .related-preset-timers-list li {} */ /* No specific li in alarm */ .related-preset-timers-list li a { display: inline-block; padding: 8px 15px; /* From alarm */ background-color: #ffffff; /* From alarm */ color: #0d6efd; /* From alarm */ text-decoration: none; border-radius: 20px; /* Pill shape from alarm */ border: 1px solid #0d6efd; /* From alarm */ transition: all 0.2s ease-in-out; /* From alarm */ font-size: 0.9rem; /* From alarm */ /* font-weight: 500; removed to match alarm's implicit weight */ } .related-preset-timers-list li a:hover, .related-preset-timers-list li a:focus { background-color: #0d6efd; /* From alarm */ color: #ffffff; /* From alarm */ border-color: #0d6efd; /* Ensure border color matches hover bg */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* From alarm */ } .no-related-preset-timers { /* Renamed from .no-related-links */ color: #6c757d; /* From alarm */ text-align: center; /* Added for consistency */ margin-top: 10px; /* From alarm */ font-size: 0.95rem; /* Adjusted slightly */ }

Looking for a specific timer? Browse all the timers.

How Our Timer Works

Our online timer helps you manage your time effectively for any task. If you need to time multiple things in one goyou can try the multi-timer.

Getting Started: A Step-by-Step Guide

  1. Set Duration: Input the desired hoursminutesand seconds for your timer.
  2. Name Your Timer (Optional): Click on the default name to give it a custom label like "Work Break" or "Cooking Time".
  3. Start and Pause: Click the green Start button to begin the countdown. The button will change to a yellow Pause button. Click it to halt the timer. Clicking Start again resumes it.
  4. After Zero: Once the timer reaches 00:00:00a sound will playand it will start counting *up*showing "Time exceeded by...". You can pause and resume this upward count.
  5. Reset: Click its Reset button to return the timer to its initially set durationready to be started again. This works whether the timer is counting downcounting upor paused.

Advanced Features & Utilities

  • Session Restore: If you close your browserthe timer's state (including running time and exceeded time) is saved. Upon your returnyou'll be prompted to restore it. Time elapsed while the page was closed will be accounted for.
  • Light & Dark Mode: Use the sun/moon icon to switch themes for comfortable viewing.
  • Fullscreen Mode: Click the fullscreen icon for a distraction-free view of your timer.
  • Sound Toggle: Use the sound icon (🔊/🔇) to mute or unmute timer completion alerts.

Frequently Asked Questions (FAQ)

How accurate is the timer?

The timer uses your browser's internal clock and JavaScript's `Date.now()` for accuracy. Display updates frequently. While very precise for web-based applicationsfor critical life-dependent timingdedicated hardware is always recommended.

What happens if I close my browser?

Your timer's set durationnameand running state are saved in your browser's local storage. When you reopen the pageyou'll be asked if you want to restore it. Our internal time calculator will automatically account for the time passedeven if you closed the browser days ago.

Is my timer data private?

Yes. All timer data is stored locally in your browser and is not sent to any server.

<> /* ======================================= */ /* CALCULATOR TOOLBOX STYLES */ /* ======================================= */ /* The main green container box - slightly updated padding */ .calculator-box-container { background-color: #f0f4f8; /* Switched to a light blue-gray for a more "toolbox" feel */ border: 1px solid #d1d9e2; border-radius: 12px; padding: 15px 30px; margin-top: 30px; } /* Style the headings inside the box */ .calculator-box-container h2 { color: #334e68; /* A darkerdesaturated blue */ font-weight: 600; font-size: 1.3em; margin-bottom: 20px; display: flex; align-items: center; } .toolbox-icon { font-size: 1.2em; margin-right: 12px; } /* The Grid Container for our tools */ .calculator-toolbox-grid { list--type: none; padding-left: 0; margin: 0; display: grid; /* On mobilecreate 1 or 2 columns based on available space */ grid-template-columns: repeat(auto-fillminmax(280px1fr)); gap: 15px; /* The space between each tool */ } /* The link itself - this is the "Tool" card */ .calculator-toolbox-grid a { display: flex; /* Use flexbox for easy alignment */ align-items: center; /* Vertically align content and arrow */ justify-content: space-between; /* Pushes the arrow to the right */ background-color: #ffffff; border: 1px solid #e0e6ed; border-radius: 8px; padding: 16px 20px; text-decoration: none; color: #007bff; font-weight: 500; box-shadow: 0 3px 1px rgba(0,0,0,0.04); transition: all 0.2s ease-in-out; /* Smooth transitions for hover effects */ min-height: 50px; /* Ensure a minimum heightadjust as needed */ } /* Add an arrow to each tool for a clear "call to action" */ .calculator-toolbox-grid a::after { content: '→'; font-weight: bold; opacity: 0.6; transition: all 0.2s ease-in-out; margin-left: 10px; /* Add some space between text and arrow */ } /* Interactive Hover Effect for the tools */ .calculator-toolbox-grid a:hover { border-color: #007bff; color: #0056b3; } /* Make the arrow more prominent on hover */ .calculator-toolbox-grid a:hover::after { opacity: 1; transform: translateX(3px); } /* Styles for the div containing the tool name and optional description */ .tool-text-content { display: flex; flex-direction: column; /* Stack name and description vertically */ justify-content: center; /* Center them if there's extra space due to min-height */ flex-grow: 1; /* Allow this to take up available space */ } /* Style for the main tool name */ .tool-text-content span { /* Main name styling is mostly handled by the tag's color and font-weight */ line-height: 1.3; } /* Style for the optional short description */ .tool-description { font-size: 0.85em; color: #555e68; /* Slightly darker than default text for subtle emphasis */ font-weight: 400; /* Lighter than the main name */ margin-top: 4px; /* Space between name and description */ line-height: 1.3; } @media (max-width: 768px) { .calculator-p { display: none; } } .calculator-p { /* You can add general paragraph styling here if needed */ color: #4a5a6a; line-height: 1.6; margin-bottom: 20px; /* Add some space below the paragraph */ }