在HTML添加时间

在HTML页面中动态显示时间，可以通过JavaScript实现。最简单的解决方案是使用<script>标签嵌入JavaScript代码，在页面加载时更新时间元素的内容。

下面几种实现方法，包括直接在HTML中嵌入JavaScript、通过外部JS文件引入以及利用CSS美化时间显示效果等。

方法一：直接在HTML中嵌入JavaScript

这是最直接的方法，适合初学者理解和快速实现。

html
</p>



    <title>实时时间显示</title>
    
        function displayTime() {
            var date = new Date();
            var time = date.toLocaleTimeString(); // 获取当前时间
            document.getElementById("currentTime").innerHTML = time; // 更新HTML内容
        }
        window.onload = function() {
            setInterval(displayTime, 1000); // 每秒刷新一次时间
        };
    


    <h1>现在的时间是: <span id="currentTime"></span></h1>



<p>

在这个例子中，我们定义了一个displayTime函数来获取并显示当前时间，并使用setInterval每秒调用一次该函数以保持时间的实时更新。

方法二：通过外部JavaScript文件

这种方法将JavaScript代码分离到一个独立的.js文件中，有助于维护和复用代码。

创建一个名为time.js的文件，内容如下：

javascript
function displayTime() {
var date = new Date();
var time = date.toLocaleTimeString();
document.getElementById("currentTime").innerHTML = time;
}
window.onload = function() {
setInterval(displayTime, 1000);
};


然后在HTML文件中引用这个外部脚本：

html
</p>



    <title>实时时间显示</title>
    


    <h1>现在的时间是: <span id="currentTime"></span></h1>



<p>

方法三：结合CSS美化时间显示

除了功能实现外，还可以通过CSS增强时间显示的视觉效果。

html
</p>



    <title>实时时间显示</title>
    
        #currentTime {
            font-size: 2em;
            color: blue;
        }
    
    
        function displayTime() {
            var date = new Date();
            var time = date.toLocaleTimeString();
            document.getElementById("currentTime").innerHTML = time;
        }
        window.onload = function() {
            setInterval(displayTime, 1000);
        };
    


    <h1>现在的时间是: <span id="currentTime"></span></h1>



<p>

这里通过CSS设置了时间字体大小为默认的两倍，并将其颜色改为蓝色，使时间显示更加醒目。

来说，无论是直接嵌入JavaScript还是分离代码到外部文件，或者进一步结合CSS进行样式设计，都可以有效地在HTML页面中添加并显示实时时间。选择哪种方式取决于具体项目的需求和个人偏好。

(www.nzw6.com)