当前位置：首页 > news >正文

用html5写一个时区时间查询器

news 2025/9/20 12:48:03

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时区时间查询器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #e2e8f0;
}

.container {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(94, 234, 212, 0.1);
padding: 40px;
max-width: 800px;
width: 100%;
border: 1px solid rgba(94, 234, 212, 0.1);
}

h1 {
text-align: center;
color: #5eead4;
margin-bottom: 30px;
font-size: 2.5em;
font-weight: 600;
letter-spacing: 0.5px;
text-shadow: 0 0 10px rgba(94, 234, 212, 0.3);
}

.search-section {
background: rgba(15, 23, 42, 0.5);
padding: 25px;
border-radius: 15px;
margin-bottom: 30px;
border: 1px solid rgba(94, 234, 212, 0.1);
}

.search-box {
display: flex;
gap: 15px;
margin-bottom: 20px;
}

input[type="text"] {
flex: 1;
padding: 15px;
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(94, 234, 212, 0.2);
border-radius: 10px;
font-size: 16px;
transition: all 0.3s;
color: #e2e8f0;
}

input[type="text"]:focus {
outline: none;
border-color: #5eead4;
box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.2);
}

input[type="text"]::placeholder {
color: #94a3b8;
}

button {
padding: 15px 30px;
background: linear-gradient(135deg, #0ea5e9 0%, #5eead4 100%);
color: #0f172a;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.quick-timezones {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.timezone-tag {
padding: 8px 16px;
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(94, 234, 212, 0.2);
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
color: #cbd5e1;
}

.timezone-tag:hover {
background: rgba(56, 189, 248, 0.2);
border-color: rgba(56, 189, 248, 0.4);
transform: translateY(-2px);
}

.results {
display: grid;
gap: 15px;
}

.time-card {
background: rgba(15, 23, 42, 0.5);
padding: 20px;
border-radius: 15px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
border: 1px solid rgba(94, 234, 212, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.time-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
border-color: rgba(94, 234, 212, 0.3);
}

.timezone-info {
flex: 1;
}

.timezone-name {
font-size: 1.2em;
font-weight: 600;
color: #5eead4;
margin-bottom: 5px;
}

.timezone-offset {
color: #94a3b8;
font-size: 0.9em;
}

.time-display {
text-align: right;
}

.current-time {
font-size: 2em;
font-weight: 300;
color: #e2e8f0;
font-family: 'Courier New', monospace;
letter-spacing: 1px;
}

.current-date {
color: #94a3b8;
font-size: 0.9em;
margin-top: 5px;
}

.error-message {
background: rgba(220, 38, 38, 0.2);
color: #fecaca;
padding: 15px;
border-radius: 10px;
text-align: center;
margin-bottom: 20px;
border: 1px solid rgba(248, 113, 113, 0.2);
}

@media (max-width: 600px) {
.container {
padding: 20px;
}

h1 {
font-size: 2em;
}

.search-box {
flex-direction: column;
}

.current-time {
font-size: 1.5em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>🌍 时区时间查询器</h1>

<div class="search-section">
<div class="search-box">
<input type="text" id="timezoneInput" placeholder="输入城市名或时区（如：北京、New York、UTC+8）">
<button onclick="searchTimezone()">查询时间</button>
</div>

<div class="quick-timezones">
<span style="color: #666; margin-right: 10px;">快速查询：</span>
<span class="timezone-tag" onclick="quickSearch('北京')">北京</span>
<span class="timezone-tag" onclick="quickSearch('东京')">东京</span>
<span class="timezone-tag" onclick="quickSearch('纽约')">纽约</span>
<span class="timezone-tag" onclick="quickSearch('伦敦')">伦敦</span>
<span class="timezone-tag" onclick="quickSearch('巴黎')">巴黎</span>
<span class="timezone-tag" onclick="quickSearch('莫斯科')">莫斯科</span>
<span class="timezone-tag" onclick="quickSearch('悉尼')">悉尼</span>
<span class="timezone-tag" onclick="quickSearch('洛杉矶')">洛杉矶</span>
</div>
</div>

let updateInterval;

function searchTimezone() {
const input = document.getElementById('timezoneInput').value.trim();
if (!input) {
showError('请输入城市名或时区');
return;
}

// 清除之前的更新间隔
if (updateInterval) {
clearInterval(updateInterval);
}

let timezone;

// 检查是否是UTC偏移格式
if (input.match(/^UTC[+-]\d{1,2}$/i)) {
timezone = input.toUpperCase();
} else if (timezoneMap[input]) {
timezone = timezoneMap[input];
} else {
// 尝试直接使用时区名称
timezone = input;
}

displayTime(timezone);
}

function quickSearch(city) {
document.getElementById('timezoneInput').value = city;
searchTimezone();
}

function displayTime(timezone) {
try {
const now = new Date();
let timeString, offsetString, timezoneName;

if (timezone.startsWith('UTC')) {
// 处理UTC偏移
const offset = parseInt(timezone.substring(3));
const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
const localTime = new Date(utc + (offset * 3600000));

timeString = localTime.toLocaleString('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});

dateString = localTime.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});

offsetString = timezone;
timezoneName = `${timezone} 时区`;
} else {
// 使用时区名称
timeString = now.toLocaleString('zh-CN', {
timeZone: timezone,
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});

dateString = now.toLocaleDateString('zh-CN', {
timeZone: timezone,
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});

// 获取时区偏移
const formatter = new Intl.DateTimeFormat('zh-CN', {
timeZone: timezone,
timeZoneName: 'short'
});
const parts = formatter.formatToParts(now);
const timeZoneNamePart = parts.find(part => part.type === 'timeZoneName');
offsetString = timeZoneNamePart ? timeZoneNamePart.value : '';

// 获取时区名称
timezoneName = getTimezoneDisplayName(timezone);
}

const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = `
<div class="time-card">
<div class="timezone-info">
<div class="timezone-name">${timezoneName}</div>
<div class="timezone-offset">${offsetString}</div>
</div>
<div class="time-display">
<div class="current-time">${timeString}</div>
<div class="current-date">${dateString}</div>
</div>
</div>
`;

hideError();

// 每秒更新时间
updateInterval = setInterval(() => {
displayTime(timezone);
}, 1000);

} catch (error) {
showError('无法识别的时区，请检查输入的城市名或时区格式');
}
}

function getTimezoneDisplayName(timezone) {
// 反向查找城市名
for (let city in timezoneMap) {
if (timezoneMap[city] === timezone) {
return city;
}
}
return timezone;
}

function showError(message) {
const errorDiv = document.getElementById('errorMessage');
errorDiv.textContent = message;
errorDiv.style.display = 'block';
document.getElementById('results').innerHTML = '';
}

function hideError() {
document.getElementById('errorMessage').style.display = 'none';
}

// 回车键触发搜索
document.getElementById('timezoneInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
searchTimezone();
}
});

// 页面加载时显示本地时间
window.onload = function() {
displayTime(Intl.DateTimeFormat().resolvedOptions().timeZone);
};
</script>
</body>
</html>

查看全文

http://www.dtcms.com/a/391737.html