穿越时空的全球时钟：一个实时多时区显示的网页应用-CSDN博客

本文链接：https://blog.csdn.net/weixin_41905135/article/details/143664611

引言

在当今这个全球化时代，人们经常需要与世界各地的朋友、同事或客户进行沟通。然而，由于时差的存在，找到一个合适的沟通时间往往成为一大挑战。为了解决这一问题，我们开发了一个名为“全球时钟”的网页应用，它能够实时显示多个主要城市的当前时间，帮助用户轻松管理跨时区的交流。

项目概述

“全球时钟”是一个基于HTML、CSS和JavaScript的网页应用，利用了Moment.js库来处理时间和时区。该应用不仅提供了直观的时间显示，还通过打字动画效果增强了用户体验。以下是项目的详细实现步骤和技术细节。

技术栈

HTML：用于构建页面结构。
CSS：用于样式设计，包括布局、颜色和动画效果。
JavaScript：用于动态更新时间和实现打字动画。
Moment.js：一个强大的JavaScript日期处理库，支持多种时区和格式化选项。
Moment Timezone：扩展了Moment.js的功能，使其能够处理全球各地的时区数据。

代码解析

HTML部分

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全球时钟</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js"></script>
</head>
<body>
    <div class="title-container">
        <h1 id="typing-title"></h1>
    </div>
    <div class="date-container">
        <p id="current-date"></p>
    </div>
    <div class="clock-container">
        <div class="clock" id="beijing">
            <h2>北 京</h2>
            <p></p>
        </div>
        <div class="clock" id="tokyo">
            <h2>东 京</h2>
            <p></p>
        </div>
        <!-- 其他城市 -->
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS部分

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.title-container {
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}

#typing-title {
    font-size: 2em;
    font-weight: bold;
    color: black;
    font-family: '黑体', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid black;
    animation: blink-caret 0.5s step-end infinite alternate;
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

.date-container {
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}

#current-date {
    font-size: 1.5em;
    font-weight: bold;
    color: black;
}

.clock-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.clock {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    position: relative;
}

.clock::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, #ff6b6b, #f7d794);
    border-radius: 10px 10px 0 0;
}

.clock h2 {
    margin: 0;
    font-size: 1.5em;
}

.clock p {
    font-size: 1.2em;
    margin: 20px 0 0;
}

JavaScript部分

function updateTime() {
    const beijingTime = moment.tz("Asia/Shanghai").format('【MM-DD】  HH:mm:ss');
    const tokyoTime = moment.tz("Asia/Tokyo").format('【MM-DD】  HH:mm:ss');
    const xinjiangTime = moment.tz("Asia/Urumqi").format('【MM-DD】  HH:mm:ss');
    const newYorkTime = moment.tz("America/New_York").format('【MM-DD】  HH:mm:ss');
    const torontoTime = moment.tz("America/Toronto").format('【MM-DD】  HH:mm:ss');
    const missouriTime = moment.tz("America/Chicago").format('【MM-DD】  HH:mm:ss');
    const sydneyTime = moment.tz("Australia/Sydney").format('【MM-DD】  HH:mm:ss');
    const delhiTime = moment.tz("Asia/Kolkata").format('【MM-DD】  HH:mm:ss');
    const moscowTime = moment.tz("Europe/Moscow").format('【MM-DD】  HH:mm:ss');

    document.getElementById('beijing').querySelector('p').textContent = beijingTime;
    document.getElementById('tokyo').querySelector('p').textContent = tokyoTime;
    document.getElementById('xinjiang').querySelector('p').textContent = xinjiangTime;
    document.getElementById('newyork').querySelector('p').textContent = newYorkTime;
    document.getElementById('toronto').querySelector('p').textContent = torontoTime;
    document.getElementById('missouri').querySelector('p').textContent = missouriTime;
    document.getElementById('sydney').querySelector('p').textContent = sydneyTime;
    document.getElementById('delhi').querySelector('p').textContent = delhiTime;
    document.getElementById('moscow').querySelector('p').textContent = moscowTime;
}

// 初始化时间
updateTime();

// 每秒更新一次时间
setInterval(updateTime, 1000);

// 打字动画
const titleText = "全  球  时  钟";
let index = 0;

function typeWriter() {
    if (index < titleText.length) {
        document.getElementById("typing-title").innerHTML += titleText.charAt(index);
        index++;
        setTimeout(typeWriter, 250); // 调整打字速度
    } else {
        setTimeout(() => {
            document.getElementById("typing-title").innerHTML = "";
            index = 0;
            typeWriter();
        }, 10000); // 每隔10秒重新开始
    }
}

typeWriter();