在现代网页设计中，动态元素可以为用户提供更丰富的交互体验。一个有趣且实用的功能是显示网站已经运行了多久。这不仅可以为用户提供网站稳定性的直观印象，还能增强网页的动态效果。在这篇文章中，我将向你展示如何在网站底部实现一个炫酷的动态运行时间计时器。

效果演示

实现步骤

1. 准备HTML结构

首先，我们需要在网站的<footer>部分添加HTML结构，用于显示计时器。我们将使用一个简单的<div>和<span>来包含计时器文本。

<footer style="background-color: #ffffff; padding: 20px; border-top: 1px solid #e0e0e0; text-align: center;">
    <div class="container">
        <div id="timer">
            <p>本站已经稳定运行了：<span id="span_dt_dt"></span></p>
        </div>
    </div>
</footer>

2. 添加CSS样式

接下来，我们使用CSS为计时器添加样式和动画效果。为了使数字更加引人注目，我们为其添加颜色和脉动动画。

<style>
    #timer {
        font-size: 2rem;
        line-height: 1.5;
        animation: fadeIn 2s ease-in-out;
    }
    .highlight {
        color: #007BFF; /* 蓝色 */
        font-weight: bold;
        animation: pulse 1s infinite;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
</style>

3. 编写JavaScript逻辑

最后，我们需要使用JavaScript来计算从网站注册日期到当前时间的年、天、小时、分钟和秒数。我们将使用setTimeout每秒更新计时器。

如何判断年份是否为闰年

如果要判断年份是否为闰年，请依照下列步骤执行：

1、如果年份被 4 整除，则移至步骤 2。 否则，请跳至步骤 5。

2、如果年份被 100 整除，则移至步骤 3。 否则，请跳至步骤 4。

3、如果年份被 400 整除，则移至步骤 4。 否则，请跳至步骤 5。

4、该年份为闰年（有366天）。

5、该年分不是闰年（有365天）。

<script>
function isLeapYear(year) {
    return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

function showDateTime() {
    const birthDay = new Date("10/6/2024 15:55:39");
    const today = new Date();
    const timeOld = today - birthDay;
    const msPerDay = 24 * 60 * 60 * 1000;

    let yearsOld = today.getFullYear() - birthDay.getFullYear();
    const adjustedBirthDay = new Date(birthDay);
    adjustedBirthDay.setFullYear(today.getFullYear());
    if (today < adjustedBirthDay) {
        yearsOld--;
    }

    let totalDaysOld = Math.floor(timeOld / msPerDay);
    let daysOld = totalDaysOld;

    for (let year = birthDay.getFullYear(); year < birthDay.getFullYear() + yearsOld; year++) {
        daysOld -= isLeapYear(year) ? 366 : 365;
    }

    const hrsOld = Math.floor((timeOld % msPerDay) / (60 * 60 * 1000));
    const minsOld = Math.floor((timeOld % (60 * 60 * 1000)) / (60 * 1000));
    const seconds = Math.floor((timeOld % (60 * 1000)) / 1000);

    document.getElementById('span_dt_dt').innerHTML = `
        <span class="highlight">${yearsOld}</span> 年 
        <span class="highlight">${daysOld}</span> 天 
        <span class="highlight">${hrsOld}</span> 时 
        <span class="highlight">${minsOld}</span> 分 
        <span class="highlight">${seconds}</span> 秒`;

    setTimeout(showDateTime, 1000);
}

showDateTime();
</script>

4. 整合到网站

将上述HTML、CSS和JavaScript代码片段添加到你的网站底部<footer>部分。这样，计时器将自动显示并更新。

完整代码

<!-- 其他网站内容 -->

<footer style="background-color: #ffffff; padding: 20px; border-top: 1px solid #e0e0e0; text-align: center;">
    <div class="container">
        <div id="timer">
            <p>本站已经稳定运行了：<span id="span_dt_dt"></span></p>
        </div>
    </div>
    <style>
        #timer {
            font-size: 2rem;
            line-height: 1.5;
            animation: fadeIn 2s ease-in-out;
        }
        .highlight {
            color: #007BFF; /* 蓝色 */
            font-weight: bold;
            animation: pulse 1s infinite;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
    </style>
    <script>
    function isLeapYear(year) {
        return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
    }

    function showDateTime() {
        const birthDay = new Date("10/6/2024 15:55:39");
        const today = new Date();
        const timeOld = today - birthDay;
        const msPerDay = 24 * 60 * 60 * 1000;

        let yearsOld = today.getFullYear() - birthDay.getFullYear();
        const adjustedBirthDay = new Date(birthDay);
        adjustedBirthDay.setFullYear(today.getFullYear());
        if (today < adjustedBirthDay) {
            yearsOld--;
        }

        let totalDaysOld = Math.floor(timeOld / msPerDay);
        let daysOld = totalDaysOld;

        for (let year = birthDay.getFullYear(); year < birthDay.getFullYear() + yearsOld; year++) {
            daysOld -= isLeapYear(year) ? 366 : 365;
        }

        const hrsOld = Math.floor((timeOld % msPerDay) / (60 * 60 * 1000));
        const minsOld = Math.floor((timeOld % (60 * 60 * 1000)) / (60 * 1000));
        const seconds = Math.floor((timeOld % (60 * 1000)) / 1000);

        document.getElementById('span_dt_dt').innerHTML = `
            <span class="highlight">${yearsOld}</span> 年 
            <span class="highlight">${daysOld}</span> 天 
            <span class="highlight">${hrsOld}</span> 时 
            <span class="highlight">${minsOld}</span> 分 
            <span class="highlight">${seconds}</span> 秒`;

        setTimeout(showDateTime, 1000);
    }

    showDateTime();
    </script>
</footer>

总结

通过简单的HTML、CSS和JavaScript，我们可以在网页底部实现一个动态的运行时间计时器。这不仅提升了页面的互动性，还为用户提供了网站稳定性的直观信息。希望这篇文章能帮助你为网站增添一个有趣而实用的功能。