01.纯CSS实现数字时钟

作者：System 时间：2024年08月06日分类：所有,css3 字数：1249

以下是一个使用纯CSS实现的简单数字时钟示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Digital Clock</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
 
  .clock {
    font-size: 3em;
    text-align: center;
  }
 
  .clock span {
    display: inline-block;
    line-height: 1;
    font-size: 1em;
  }
 
  .colon {
    animation: blink 1s step-end infinite;
  }
 
  @keyframes blink {
    to {
      opacity: 0;
    }
  }
</style>
</head>
<body>
 
<div class="clock">
  <span class="hour">00</span><span class="colon">:</span><span class="minute">00</span>
</div>
 
<script>
function updateClock() {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  document.querySelector('.hour').textContent = hours;
  document.querySelector('.minute').textContent = minutes;
}
 
setInterval(updateClock, 1000);
updateClock();
</script>
 
</body>
</html>

这段代码会在网页上显示一个数字时钟，时钟每秒更新一次。时钟使用CSS样式化，时分显示在屏幕中央，并且冒号（:）会闪烁以模拟实时时钟的效果。

01.纯CSS实现数字时钟

评论已关闭

推荐阅读