css中电子时钟

CSS（层叠样式表）是前端开发必不可少的一部分，其中电子时钟是常见的技术应用之一。这里我们来介绍一下如何使用CSS来制作电子时钟。

/* HTML 代码 */
<div class="clock">
    <span class="clock__hour"></span>
    <span class="clock__minute"></span>
    <span class="clock__second"></span>
</div>

/* CSS 代码 */
.clock {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    font-weight: bold;
}

.clock__hour,
.clock__minute,
.clock__second {
    display: inline-block;
    margin-right: 10px;
    padding: 5px;
    background-color: #fff;
    border-radius: 10px;
}

.clock__hour {
    color: #ff0000;
}

.clock__minute {
    color: #00ff00;
}

.clock__second {
    color: #0000ff;
} 

在上述代码中，我们使用了flex布局来居中显示时钟。然后，我们为时、分、秒三个数字块分别设置样式。通过设置不同的颜色来区分时、分、秒，以及为数字块添加圆角等样式，让时钟更加美观。

接下来，我们需要使用JavaScript来让时钟动起来：

/* JavaScript 代码 */
function updateTime() {
    const now = new Date();
    const hour = now.getHours();
    const minute = now.getMinutes();
    const second = now.getSeconds();

    const hourSpan = document.querySelector('.clock__hour');
    const minuteSpan = document.querySelector('.clock__minute');
    const secondSpan = document.querySelector('.clock__second');

    hourSpan.textContent = formatTime(hour);
    minuteSpan.textContent = formatTime(minute);
    secondSpan.textContent = formatTime(second);
}

function formatTime(time) {
    return time < 10 ? '0' + time : time;
}

setInterval(updateTime, 1000); 

在JavaScript中，我们通过setInterval函数每隔一秒调用updateTime函数来更新时钟。在updateTime函数中，我们获取当前时间，然后将时、分、秒三个数字块的内容更新为当前时间。同时，我们使用formatTime函数来将数字格式化为两位数，以便美观显示。

通过上述CSS和JavaScript代码，我们就可以制作一个简单的电子时钟。