用HTML、CSS、JavaScript 写一个好看的 时间日期星期天的 样式
时间: 2024-05-04 14:20:18 浏览: 10
好的,下面是一个简单的示例,包含时间、日期和星期几的样式:
HTML 代码:
```html
<div class="clock">
<div class="time"></div>
<div class="date"></div>
<div class="day"></div>
</div>
```
CSS 代码:
```css
.clock {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
font-size: 2em;
color: #333;
}
.time {
font-weight: bold;
}
.date {
margin-top: 0.5em;
}
.day {
margin-top: 0.5em;
}
```
JavaScript 代码:
```javascript
function updateTime() {
const now = new Date();
const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const date = now.toLocaleDateString();
const day = now.toLocaleDateString([], { weekday: 'long' });
document.querySelector('.time').textContent = time;
document.querySelector('.date').textContent = date;
document.querySelector('.day').textContent = day;
}
updateTime();
setInterval(updateTime, 1000);
```
你可以将上述代码复制到一个 HTML 文件中并在浏览器中打开该文件,看看效果如何。