标题
五个国家时间，HTML单页美化版，时间联网后自动校准
逍遥 - 02月28日 10:18
5℃ 0
内容
<!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;
font-family: 'Arial', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.title {
color: white;
text-align: center;
margin-bottom: 40px;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.title h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.title p {
font-size: 1rem;
opacity: 0.8;
}
.time-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
max-width: 1200px;
width: 100%;
}
.time-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
width: 280px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.time-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(31, 38, 135, 0.3);
}
.country-name {
font-size: 1.5rem;
color: #2d3748;
margin-bottom: 15px;
text-align: center;
font-weight: 600;
}
.time-display {
font-size: 2.2rem;
color: #4a5568;
text-align: center;
font-weight: 700;
margin-bottom: 10px;
}
.date-display {
font-size: 1rem;
color: #718096;
text-align: center;
}
.timezone {
font-size: 0.9rem;
color: #9f7aea;
text-align: center;
margin-top: 10px;
}
/* 响应式适配 */
@media (max-width: 768px) {
.title h1 {
font-size: 2rem;
}
.time-card {
width: 100%;
max-width: 320px;
}
.time-display {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="title">
<h1>全球实时时间</h1>
<p>时间自动校准 ，精准无误差</p>
</div>
<div class="time-container">
<!-- 中国 -->
<div class="time-card" id="china-time">
<div class="country-name">中国 · 北京</div>
<div class="time-display"></div>
<div class="date-display"></div>
<div class="timezone">UTC+8 (中国标准时间)</div>
</div>
<!-- 美国 -->
<div class="time-card" id="usa-time">
<div class="country-name">美国 · 纽约</div>
<div class="time-display"></div>
<div class="date-display"></div>
<div class="timezone">UTC-5/UTC-4 (东部时间)</div>
</div>
<!-- 英国 -->
<div class="time-card" id="uk-time">
<div class="country-name">英国 · 伦敦</div>
<div class="time-display"></div>
<div class="date-display"></div>
<div class="timezone">UTC±0 (格林威治时间)</div>
</div>
<!-- 日本 -->
<div class="time-card" id="japan-time">
<div class="country-name">日本 · 东京</div>
<div class="time-display"></div>
<div class="date-display"></div>
<div class="timezone">UTC+9 (日本标准时间)</div>
</div>
<!-- 澳大利亚 -->
<div class="time-card" id="australia-time">
<div class="country-name">澳大利亚 · 悉尼</div>
<div class="time-display"></div>
<div class="date-display"></div>
<div class="timezone">UTC+10/UTC+11 (澳东时间)</div>
</div>
</div>
<script>
// 定义需要展示的时区配置
const timezones = [
{ id: 'china-time', timezone: 'Asia/Shanghai', lang: 'zh-CN' },
{ id: 'usa-time', timezone: 'America/New_York', lang: 'en-US' },
{ id: 'uk-time', timezone: 'Europe/London', lang: 'en-GB' },
{ id: 'japan-time', timezone: 'Asia/Tokyo', lang: 'ja-JP' },
{ id: 'australia-time', timezone: 'Australia/Sydney', lang: 'en-AU' }
];
// 更新时间函数
function updateTimes() {
const now = new Date(); // 获取当前网络时间（自动校准）
timezones.forEach(item => {
// 格式化时间
const timeFormatter = new Intl.DateTimeFormat(item.lang, {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: item.timezone
});
// 格式化日期
const dateFormatter = new Intl.DateTimeFormat(item.lang, {
year: 'numeric',
month: '2-digit',
day: '2-digit',
weekday: 'long',
timeZone: item.timezone
});
// 获取格式化后的时间和日期
const timeStr = timeFormatter.format(now);
const dateStr = dateFormatter.format(now);
// 更新到页面
const card = document.getElementById(item.id);
card.querySelector('.time-display').textContent = timeStr;
card.querySelector('.date-display').textContent = dateStr;
});
}
// 初始化更新一次
updateTimes();
// 每秒更新一次时间
setInterval(updateTimes, 1000);
</script>
</body>
</html>你可能想看：
- 最近发表
- 相关推荐
-
- 简约代挂引导页HTML源码，全自动代挂无需你操心
- 校直机,液压校直机,自动校直机-山东威锻机械设备有限公司
- QQ自定义跳转单页开源版，简洁美观支持手机电脑自适应
- 赞助我们HTML页面
- HTML美食大转盘，想吃什么而犹豫不决的最佳选择
- 网站暂时闭站公告纯HTML，一键部署源码
- 时空穿越 · 闭站公告纯HTML
- HTML5 + Web Audio API + lamejs 实现的音频在线剪切助手源码
- 智能网页工作便签备忘录包含 HTML 结构、CSS 样式、基础 JavaScript 交互
- 文字转PNG和ICOHTML+CSS+JavaScript+Canvas，结合js-ico库实现 ICO 格式
- 引导页html5源码Notepad++、VS Code
- 高频 HTML 代码片段和高频 CSS 代码片段
- 网站跳转HTML代码GO跳转导航网站必备广告必备跳转
- 网站导航页面，引导页HTML，自带子页面
- 防失联引导页HTML源码,网站联盟独家