div 显示时间

2023-12-16 14:46:39

如果你想要在页面上使用 div 元素来显示当前时间，你可以使用 JavaScript 来获取当前时间并将其更新到 div 中。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Time</title>
    <style>
        /* 在这里添加样式，例如字体、大小等 */
        #time-display {
            font-size: 20px;
            font-family: Arial, sans-serif;
            color: #333;
        }
    </style>
</head>
<body>
    <div id="time-display"></div>

    <script>
        // 更新时间并显示在 div 中
        function updateTime() {
            var currentTime = new Date();
            var hours = currentTime.getHours();
            var minutes = currentTime.getMinutes();
            var seconds = currentTime.getSeconds();

            // 格式化时间，确保时、分、秒始终是两位数
            hours = (hours < 10) ? "0" + hours : hours;
            minutes = (minutes < 10) ? "0" + minutes : minutes;
            seconds = (seconds < 10) ? "0" + seconds : seconds;

            var formattedTime = hours + ":" + minutes + ":" + seconds;

            // 将格式化后的时间更新到 div 中
            document.getElementById("time-display").innerText = formattedTime;
        }

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

        // 页面加载时立即更新时间
        updateTime();
    </script>
</body>
</html>

?这个例子创建了一个 div 元素用于显示时间，并使用内联的 JavaScript 代码通过 setInterval 函数每秒更新一次时间。你可以根据需要更改样式、字体、大小等，以使其符合你的网站设计。

文章来源:https://blog.csdn.net/ITLearnHall/article/details/135030672
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。