页脚日期的动态更新 - JavaScript

在网页中，页脚通常会显示该网页的制作时间或更新时间。如果每次网页更新时都手动更改页脚的日期，这将是一项极其繁琐的工作。借助 JavaScript，我们可以轻松实现自动更新页脚日期的功能。

实现步骤

1. 创建一个具有 id 为 footer 的页面元素，该元素将用于显示日期。
2. 在 footer 元素中加入一个空的 span 元素，该元素用于承载当前日期。
3. 使用 JavaScript 获取当前日期并将其赋值给 footer 元素中的 span 元素。
4. 页面每次加载完毕或刷新时，使用 JavaScript 更新 footer 元素中的 span 元素的日期。

## HTML

为了显示页脚及其相关内容，我们需要添加一些 HTML 代码：

JavaScript

接下来，我们通过 JavaScript 代码更新内联 span 元素的内容：

<script>
    // 在页面加载完毕时更新页脚日期
    window.onload = function() {
        updateFooterDate();
    }

    // 定义更新页脚日期的函数
    function updateFooterDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.toLocaleTimeString('zh-Hans');
        var dateString = year + '-' + month + '-' + day + ' ' + hour;
        var span = document.getElementById('footer').querySelector('span');
        span.innerHTML = dateString;
    }
    
    // 自动更新页脚日期
    setInterval(updateFooterDate, 1000);
</script>

在这个 JavaScript 代码中，我们定义了三个函数：

• window.onload()：此函数在页面加载完毕后自动调用。在此函数中，我们调用了 updateFooterDate() 函数来初始化页脚日期。
• updateFooterDate()：此函数实际执行了日期更新。它首先获取当前日期并将其格式化为字符串，然后将其更新到页脚 span 元素中。
• setInterval()：此函数可以定期调用指定的函数。在本例中，我们每秒钟调用 updateFooterDate() 函数一次，以保持日期更新。

以上代码可以简单地通过将其添加到网页的 head 或 body 部分来使用。如需更好地控制样式，我们可以使用 CSS 对页脚进行设计。

总结

最后，我们已经成功实现了自动更新页脚日期的功能，而不需要手动更新。此示例程序可用于任何需要定期更新日期的网站。