时间样式

玄之 · 发表于 2025-8-8 23:12:39

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电子时钟（黑色字体）</title>
  <style>
    /* 重置默认样式，避免影响嵌入页面 */
    .clock-container, .clock-container * {
      margin: 0; 
      padding: 0; 
      box-sizing: border-box;
    }

    /* 时钟容器，透明无背景，上下结构 */
    .clock-container {
      display: flex;
      flex-direction: column; /* 垂直排列时间和日期 */
      align-items: center;
      justify-content: center;
      background: transparent;
      font-family: sans-serif;
    }

    /* 时间数字容器，模拟数码管布局 */
    .time-display {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    /* 日期显示，黑色字体 */
    .date-display {
      color: #000;
      text-align: center;
      margin-top: 8px;
      font-size: 14px;
      letter-spacing: 1px;
      text-shadow: 0 0 4px rgba(0,0,0,0.2);
      font-family: monospace;
    }

    /* 单个数字容器（7 段数码管结构） */
    .digit {
      position: relative;
      width: 30px;
      height: 50px;
    }

    /* 数码管线段基础样式 */
    .segment {
      position: absolute;
      background: rgba(255,255,255,0.1); /* 未点亮时接近透明 */
      border-radius: 2px;
      transition: background-color 0.2s;
      box-shadow: 0 0 3px rgba(0,0,0,0.1);
    }

    /* 点亮的线段样式（黑色） */
    .segment.on {
      background: #000;
      box-shadow: 0 0 5px rgba(0,0,0,0.6), 
                  0 0 10px rgba(0,0,0,0.4), 
                  0 0 15px rgba(0,0,0,0.2);
    }

    /* 7 段数码管各线段位置 & 尺寸 */
    .a { top: 0; left: 4px; width: 22px; height: 6px; }
    .b { top: 4px; right: 0; width: 6px; height: 20px; }
    .c { bottom: 4px; right: 0; width: 6px; height: 20px; }
    .d { bottom: 0; left: 4px; width: 22px; height: 6px; }
    .e { bottom: 4px; left: 0; width: 6px; height: 20px; }
    .f { top: 4px; left: 0; width: 6px; height: 20px; }
    .g { top: 22px; left: 4px; width: 22px; height: 6px; }

    /* 时间分隔符（冒号） */
    .separator {
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
      height: 50px;
    }

    .separator-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #000;
      box-shadow: 0 0 5px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.4);
      animation: blink 1s infinite;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
  </style>
</head>
<body>
  <!-- 时钟容器，可直接复制嵌入其他页面 -->
  <div class="clock-container">
    <div id="timeDisplay" class="time-display"></div>
    <p id="dateDisplay" class="date-display"></p>
  </div>

  <script>
    // 创建单个数码管 DOM（7 段结构）
    function createDigit() {
      const digit = document.createElement('div');
      digit.className = 'digit';
      // 生成 7 段线段
      ['a', 'b', 'c', 'd', 'e', 'f', 'g'].forEach(seg => {
        const segment = document.createElement('div');
        segment.className = `segment ${seg}`;
        digit.appendChild(segment);
      });
      return digit;
    }

    // 创建时间分隔符（冒号）
    function createSeparator() {
      const separator = document.createElement('div');
      separator.className = 'separator';
      const dot1 = document.createElement('div');
      dot1.className = 'separator-dot';
      const dot2 = document.createElement('div');
      dot2.className = 'separator-dot';
      separator.appendChild(dot1);
      separator.appendChild(dot2);
      return separator;
    }

    // 初始化时钟 DOM 结构
    const timeDisplay = document.getElementById('timeDisplay');
    // 时、分、秒各两位，结构：[时十, 时个, 分隔符, 分十, 分个, 分隔符, 秒十, 秒个]
    const digits = [
      createDigit(), createDigit(), createSeparator(),
      createDigit(), createDigit(), createSeparator(),
      createDigit(), createDigit()
    ];
    digits.forEach(el => timeDisplay.appendChild(el));

    // 7 段数码管数字映射表（决定哪些线段点亮）
    const digitMap = {
      0: ['a', 'b', 'c', 'd', 'e', 'f'],
      1: ['b', 'c'],
      2: ['a', 'b', 'g', 'e', 'd'],
      3: ['a', 'b', 'g', 'c', 'd'],
      4: ['f', 'g', 'b', 'c'],
      5: ['a', 'f', 'g', 'c', 'd'],
      6: ['a', 'f', 'g', 'c', 'd', 'e'],
      7: ['a', 'b', 'c'],
      8: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
      9: ['a', 'b', 'c', 'd', 'f', 'g']
    };

    // 更新单个数字显示（控制线段亮灭）
    function updateDigit(digitEl, num) {
      // 先关闭所有线段
      digitEl.querySelectorAll('.segment').forEach(seg => {
        seg.classList.remove('on');
      });
      // 点亮对应数字的线段
      if (digitMap[num]) {
        digitMap[num].forEach(segName => {
          digitEl.querySelector(`.${segName}`).classList.add('on');
        });
      }
    }

    // 核心：更新时间 & 日期
    function updateClock() {
      const now = new Date();
      // 处理时间（时、分、秒补两位）
      const hh = now.getHours().toString().padStart(2, '0');
      const mm = now.getMinutes().toString().padStart(2, '0');
      const ss = now.getSeconds().toString().padStart(2, '0');
      // 拆分为单个数字：[时十, 时个, 分十, 分个, 秒十, 秒个]
      const timeNums = [
        hh[0], hh[1], 
        mm[0], mm[1], 
        ss[0], ss[1]
      ];

      // 更新时间显示（按顺序对应 DOM 元素）
      updateDigit(digits[0], timeNums[0]);
      updateDigit(digits[1], timeNums[1]);
      updateDigit(digits[3], timeNums[2]);
      updateDigit(digits[4], timeNums[3]);
      updateDigit(digits[6], timeNums[4]);
      updateDigit(digits[7], timeNums[5]);

      // 处理日期
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][now.getDay()];
      document.getElementById('dateDisplay').textContent = 
        `${year}年${month}月${day}日 ${week}`;
    }

    // 初始化 + 每秒更新
    updateClock();
    setInterval(updateClock, 1000);
  </script>
</body>
</html>

白

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯 CSS 电子时钟（白色 LED）</title>
  <style>
    /* 重置默认样式，避免影响嵌入页面 */
    .clock-container, .clock-container * {
      margin: 0; 
      padding: 0; 
      box-sizing: border-box;
    }

    /* 时钟容器，透明无背景 */
    .clock-container {
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      /* 关键：透明背景，嵌入后不遮挡其他内容 */
      font-family: sans-serif;
      /* 可根据嵌入场景调整宽高，这里自适应 */
    }

    /* 时间数字容器，模拟数码管布局 */
    .time-display {
      display: flex;
      gap: 6px; 
      /* 字符间距，可微调 */
      align-items: center;
    }

    /* 日期显示，白色透明阴影 */
    .date-display {
      color: #fff;
      text-align: center;
      margin-top: 8px;
      font-size: 14px;
      letter-spacing: 1px;
      text-shadow: 0 0 4px rgba(255,255,255,0.6);
      /* 透明文字阴影，增强可读性 */
      font-family: monospace;
      /* 等宽字体更协调 */
    }

    /* 单个数字容器（7 段数码管结构） */
    .digit {
      position: relative;
      width: 30px; 
      /* 缩小尺寸，适合嵌入 */
      height: 50px;
    }

    /* 数码管线段基础样式 */
    .segment {
      position: absolute;
      background: rgba(0,0,0,0.2); 
      /* 未点亮时透明黑 */
      border-radius: 2px;
      transition: background-color 0.2s;
      box-shadow: 0 0 3px rgba(255,255,255,0.2);
      /* 弱阴影过渡 */
    }

    /* 点亮的线段样式（白色 LED） */
    .segment.on {
      background: #fff;
      box-shadow: 0 0 5px #fff, 
                  0 0 10px #fff, 
                  0 0 15px #fff;
      /* 白色发光效果 */
    }

    /* 7 段数码管各线段位置 & 尺寸 */
    .a { top: 0; left: 4px; width: 22px; height: 6px; }
    .b { top: 4px; right: 0; width: 6px; height: 20px; }
    .c { bottom: 4px; right: 0; width: 6px; height: 20px; }
    .d { bottom: 0; left: 4px; width: 22px; height: 6px; }
    .e { bottom: 4px; left: 0; width: 6px; height: 20px; }
    .f { top: 4px; left: 0; width: 6px; height: 20px; }
    .g { top: 22px; left: 4px; width: 22px; height: 6px; }

    /* 时间分隔符（冒号） */
    .separator {
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
      height: 50px;
    }

    .separator-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 5px #fff, 0 0 10px #fff;
      animation: blink 1s infinite;
      /* 冒号闪烁动画 */
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
  </style>
</head>
<body>
  <!-- 时钟容器，可直接复制嵌入其他页面 -->
  <div class="clock-container">
    <div id="timeDisplay" class="time-display"></div>
    <p id="dateDisplay" class="date-display"></p>
  </div>

  <script>
    // 创建单个数码管 DOM（7 段结构）
    function createDigit() {
      const digit = document.createElement('div');
      digit.className = 'digit';
      // 生成 7 段线段
      ['a', 'b', 'c', 'd', 'e', 'f', 'g'].forEach(seg => {
        const segment = document.createElement('div');
        segment.className = `segment ${seg}`;
        digit.appendChild(segment);
      });
      return digit;
    }

    // 创建时间分隔符（冒号）
    function createSeparator() {
      const separator = document.createElement('div');
      separator.className = 'separator';
      const dot1 = document.createElement('div');
      dot1.className = 'separator-dot';
      const dot2 = document.createElement('div');
      dot2.className = 'separator-dot';
      separator.appendChild(dot1);
      separator.appendChild(dot2);
      return separator;
    }

    // 初始化时钟 DOM 结构
    const timeDisplay = document.getElementById('timeDisplay');
    // 时、分、秒各两位，结构：[时十, 时个, 分隔符, 分十, 分个, 分隔符, 秒十, 秒个]
    const digits = [
      createDigit(), createDigit(), createSeparator(),
      createDigit(), createDigit(), createSeparator(),
      createDigit(), createDigit()
    ];
    digits.forEach(el => timeDisplay.appendChild(el));

    // 7 段数码管数字映射表（决定哪些线段点亮）
    const digitMap = {
      0: ['a', 'b', 'c', 'd', 'e', 'f'],
      1: ['b', 'c'],
      2: ['a', 'b', 'g', 'e', 'd'],
      3: ['a', 'b', 'g', 'c', 'd'],
      4: ['f', 'g', 'b', 'c'],
      5: ['a', 'f', 'g', 'c', 'd'],
      6: ['a', 'f', 'g', 'c', 'd', 'e'],
      7: ['a', 'b', 'c'],
      8: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
      9: ['a', 'b', 'c', 'd', 'f', 'g']
    };

    // 更新单个数字显示（控制线段亮灭）
    function updateDigit(digitEl, num) {
      // 先关闭所有线段
      digitEl.querySelectorAll('.segment').forEach(seg => {
        seg.classList.remove('on');
      });
      // 点亮对应数字的线段
      if (digitMap[num]) {
        digitMap[num].forEach(segName => {
          digitEl.querySelector(`.${segName}`).classList.add('on');
        });
      }
    }

    // 核心：更新时间 & 日期
    function updateClock() {
      const now = new Date();
      // 处理时间（时、分、秒补两位）
      const hh = now.getHours().toString().padStart(2, '0');
      const mm = now.getMinutes().toString().padStart(2, '0');
      const ss = now.getSeconds().toString().padStart(2, '0');
      // 拆分为单个数字：[时十, 时个, 分十, 分个, 秒十, 秒个]
      const timeNums = [
        hh[0], hh[1], 
        mm[0], mm[1], 
        ss[0], ss[1]
      ];

      // 更新时间显示（按顺序对应 DOM 元素）
      updateDigit(digits[0], timeNums[0]);
      updateDigit(digits[1], timeNums[1]);
      updateDigit(digits[3], timeNums[2]);
      updateDigit(digits[4], timeNums[3]);
      updateDigit(digits[6], timeNums[4]);
      updateDigit(digits[7], timeNums[5]);

      // 处理日期
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][now.getDay()];
      document.getElementById('dateDisplay').textContent = 
        `${year}年${month}月${day}日 ${week}`;
    }

    // 初始化 + 每秒更新
    updateClock();
    setInterval(updateClock, 1000);
  </script>
</body>
</html>

[网站源码] 时间样式

免责声明

回复

浏览过的版块

关于我们

热门板块

jiubbs2025@163.com