为了创建一个展示当前时间的好看网页，可以使用 HTML 和 CSS 来设计页面，JavaScript 来动态更新时间。以下是一个简单的示例，包括了基本的样式和 JavaScript 代码来实时显示当前时间。

HTML 文件 (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当前时间展示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="time-display">
            <h1 id="current-time"></h1>
            <p>当前时间</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
CSS 文件 (styles.css)
/* Reset some default styling */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
}

.time-display {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 3rem;
    margin: 0;
    color: #333;
}

p {
    font-size: 1.2rem;
    color: #666;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
JavaScript 文件 (script.js)
function updateTime() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');

    const timeString = `${hours}:${minutes}:${seconds}`;
    document.getElementById('current-time').textContent = timeString;
}

// Update the time every second
setInterval(updateTime, 1000);

// Initial call to display the time immediately on page load
updateTime();
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
说明
  1. HTML: 定义了网页结构，包括一个容器和一个显示时间的区域。
  2. CSS: 提供了简洁的样式，使时间显示区域居中，背景为白色，并添加了圆角和阴影效果。
  3. JavaScript: 通过 setInterval 每秒更新一次显示的时间，并且在页面加载时立即显示时间。

将这三个文件放在同一目录下，然后用浏览器打开 index.html，会看到一个简洁且现代的网页，实时显示当前时间。可以根据需要进一步自定义样式和功能。