js+css实现二进制时钟显示时间代码-html代码-BFW代码库

js+css实现二进制时钟显示时间代码

代码语言：html

代码描述：js+css实现二进制时钟显示时间代码，你能看懂吗？

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #121212;
        color: #eee;
        font-family: monospace;
        overflow:hidden;
        user-select:none;
      }

      .clock {
        display: flex;
        gap: 1px;
        background:#141414;
        border:#242424 solid 2px;
        padding:2rem;
        border-radius:3rem;
        align-content:center;
        height:.6rem;
      }

      .digit {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(5, 1fr);
        width: 20px;
        height: 20px;
        border: none;
      }

      .led {
        background-color: #000;
        border-radius: 0%;
        width: 80%;
        height: 120%;
        margin: auto;
      }

      .led.on {
        background-color: tomato;
        transform:scale(3);
      }

      @media (max-width: 500px) {
        .digit {
          width: 15px;
          height: 20px;
        }

        .led {
        .........完整代码请登录后点击上方下载按钮下载查看