为了创建一个展示当前时间的好看网页,可以使用 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>
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;
}
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();
说明
- HTML: 定义了网页结构,包括一个容器和一个显示时间的区域。
- CSS: 提供了简洁的样式,使时间显示区域居中,背景为白色,并添加了圆角和阴影效果。
- JavaScript: 通过
setInterval
每秒更新一次显示的时间,并且在页面加载时立即显示时间。
将这三个文件放在同一目录下,然后用浏览器打开 index.html
,会看到一个简洁且现代的网页,实时显示当前时间。可以根据需要进一步自定义样式和功能。