Created
August 13, 2025 03:19
-
-
Save Wxh16144/f02ea4b30272374c677bfc2f5d0c1c9b to your computer and use it in GitHub Desktop.
全球时区对照工具
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>全球时区对照工具</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); | |
| color: #fff; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| text-align: center; | |
| padding: 30px 0; | |
| margin-bottom: 30px; | |
| } | |
| h1 { | |
| font-size: 2.8rem; | |
| margin-bottom: 10px; | |
| text-shadow: 0 2px 10px rgba(0,0,0,0.3); | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .utc-time-display { | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 15px; | |
| padding: 20px; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); | |
| backdrop-filter: blur(4px); | |
| } | |
| .utc-label { | |
| font-size: 1.2rem; | |
| margin-bottom: 10px; | |
| opacity: 0.8; | |
| } | |
| .utc-time { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| font-family: 'Courier New', monospace; | |
| letter-spacing: 2px; | |
| } | |
| .controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| margin: 20px 0; | |
| } | |
| button { | |
| background: rgba(255, 255, 255, 0.15); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: white; | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(5px); | |
| } | |
| button:hover { | |
| background: rgba(255, 255, 255, 0.25); | |
| transform: translateY(-2px); | |
| } | |
| .timezones-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .timezone-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .timezone-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .flag { | |
| width: 50px; | |
| height: 35px; | |
| border-radius: 4px; | |
| margin-right: 15px; | |
| object-fit: cover; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2); | |
| } | |
| .city-info { | |
| flex-grow: 1; | |
| } | |
| .city-name { | |
| font-size: 1.4rem; | |
| font-weight: bold; | |
| } | |
| .timezone-id { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| font-family: monospace; | |
| } | |
| .time-display { | |
| text-align: center; | |
| margin: 10px 0; | |
| } | |
| .local-time { | |
| font-size: 2.2rem; | |
| font-weight: bold; | |
| font-family: 'Courier New', monospace; | |
| letter-spacing: 1px; | |
| } | |
| .utc-offset { | |
| font-size: 1.1rem; | |
| opacity: 0.9; | |
| margin-top: 5px; | |
| } | |
| .description { | |
| margin-top: 15px; | |
| font-size: 0.95rem; | |
| opacity: 0.85; | |
| line-height: 1.5; | |
| } | |
| .day-status { | |
| margin-top: 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.9rem; | |
| } | |
| .day-icon { | |
| font-size: 1.2rem; | |
| } | |
| @media (max-width: 768px) { | |
| .timezones-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| h1 { | |
| font-size: 2.2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1><i class="fas fa-globe-americas"></i> UTC时间全球对照</h1> | |
| <p class="subtitle">当格林尼治标准时间（UTC）为0点时，查看全球主要城市的时间</p> | |
| </header> | |
| <div class="utc-time-display"> | |
| <div class="utc-label">当前UTC时间</div> | |
| <div class="utc-time" id="utcTime">00:00:00</div> | |
| <div class="controls"> | |
| <button id="setMidnight"><i class="fas fa-moon"></i> 设置为UTC午夜</button> | |
| <button id="setCurrent"><i class="fas fa-sync"></i> 当前UTC时间</button> | |
| </div> | |
| </div> | |
| <div class="timezones-grid" id="timezonesContainer"> | |
| <!-- 时区卡片将通过JS动态生成 --> | |
| </div> | |
| </div> | |
| <script> | |
| // 主要城市数据 | |
| const cities = [ | |
| { id: 'london', name: '伦敦', tz: 'Europe/London', flag: '🇬🇧', offset: '+0/+1' }, | |
| { id: 'newYork', name: '纽约', tz: 'America/New_York', flag: '🇺🇸', offset: '-4/-5' }, | |
| { id: 'tokyo', name: '东京', tz: 'Asia/Tokyo', flag: '🇯🇵', offset: '+9' }, | |
| { id: 'beijing', name: '北京', tz: 'Asia/Shanghai', flag: '🇨🇳', offset: '+8' }, | |
| { id: 'sydney', name: '悉尼', tz: 'Australia/Sydney', flag: '🇦🇺', offset: '+10/+11' }, | |
| { id: 'losAngeles', name: '洛杉矶', tz: 'America/Los_Angeles', flag: '🇺🇸', offset: '-7/-8' }, | |
| { id: 'paris', name: '巴黎', tz: 'Europe/Paris', flag: '🇫🇷', offset: '+1/+2' }, | |
| { id: 'cairo', name: '开罗', tz: 'Africa/Cairo', flag: '🇪🇬', offset: '+2/+3' }, | |
| { id: 'singapore', name: '新加坡', tz: 'Asia/Singapore', flag: '🇸🇬', offset: '+8' } | |
| ]; | |
| // 当前UTC时间 | |
| let currentUTCTime = new Date(); | |
| currentUTCTime.setUTCHours(0, 0, 0, 0); | |
| // 更新UTC时间显示 | |
| function updateUTCTimeDisplay() { | |
| const utcTimeElement = document.getElementById('utcTime'); | |
| const hours = String(currentUTCTime.getUTCHours()).padStart(2, '0'); | |
| const minutes = String(currentUTCTime.getUTCMinutes()).padStart(2, '0'); | |
| const seconds = String(currentUTCTime.getUTCSeconds()).padStart(2, '0'); | |
| utcTimeElement.textContent = `${hours}:${minutes}:${seconds}`; | |
| } | |
| // 获取城市本地时间 | |
| function getLocalTime(city) { | |
| return new Date(currentUTCTime).toLocaleTimeString('en-US', { | |
| timeZone: city.tz, | |
| hour: '2-digit', | |
| minute: '2-digit', | |
| second: '2-digit', | |
| hour12: false | |
| }); | |
| } | |
| // 获取UTC偏移量 | |
| function getUTCOffset(city) { | |
| const date = new Date(currentUTCTime); | |
| const timeString = date.toLocaleString('en-US', { | |
| timeZone: city.tz, | |
| timeZoneName: 'short' | |
| }); | |
| const matches = timeString.match(/GMT([+-]\d+)/); | |
| return matches ? matches[0] : ''; | |
| } | |
| // 获取是否是白天 | |
| function isDaytime(city) { | |
| const date = new Date(currentUTCTime); | |
| const hours = date.toLocaleString('en-US', { | |
| timeZone: city.tz, | |
| hour: 'numeric', | |
| hour12: false | |
| }); | |
| return hours >= 6 && hours < 18; | |
| } | |
| // 生成时区卡片 | |
| function generateTimezoneCards() { | |
| const container = document.getElementById('timezonesContainer'); | |
| container.innerHTML = ''; | |
| cities.forEach(city => { | |
| const localTime = getLocalTime(city); | |
| const utcOffset = getUTCOffset(city); | |
| const isDay = isDaytime(city); | |
| const card = document.createElement('div'); | |
| card.className = 'timezone-card'; | |
| card.innerHTML = ` | |
| <div class="card-header"> | |
| <div class="flag">${city.flag}</div> | |
| <div class="city-info"> | |
| <div class="city-name">${city.name}</div> | |
| <div class="timezone-id">${city.tz}</div> | |
| </div> | |
| </div> | |
| <div class="time-display"> | |
| <div class="local-time">${localTime}</div> | |
| <div class="utc-offset">${utcOffset}</div> | |
| </div> | |
| <div class="day-status"> | |
| <i class="fas ${isDay ? 'fa-sun day-icon' : 'fa-moon day-icon'}"></i> | |
| <span>${isDay ? '白天' : '夜晚'}</span> | |
| </div> | |
| <div class="description"> | |
| 当UTC时间为0点时，${city.name}处于${isDay ? '白天' : '夜晚'}。 | |
| ${city.offset.includes('/') ? | |
| `（${city.offset.split('/')[0]}为夏令时，${city.offset.split('/')[1]}为冬令时）` : | |
| `（全年固定UTC${city.offset}）`} | |
| </div> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| } | |
| // 初始化和事件绑定 | |
| document.addEventListener('DOMContentLoaded', () => { | |
| updateUTCTimeDisplay(); | |
| generateTimezoneCards(); | |
| // 设置为UTC午夜 | |
| document.getElementById('setMidnight').addEventListener('click', () => { | |
| currentUTCTime.setUTCHours(0, 0, 0, 0); | |
| updateUTCTimeDisplay(); | |
| generateTimezoneCards(); | |
| }); | |
| // 设置为当前UTC时间 | |
| document.getElementById('setCurrent').addEventListener('click', () => { | |
| currentUTCTime = new Date(); | |
| updateUTCTimeDisplay(); | |
| generateTimezoneCards(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment