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 {
          width: 60%;
          height: 60%;
        }
      }

      .title {
        position:absolute;
        font-family:arial;
        color:#fff;
      }
      ._1 {
        top:20px;
        left:70px;
      }
      ._2 {
        top:20px;
        right:30px;
      }
      .logo {
        top:30px;
        left:30px;
        position:absolute;
      }
    </style>
  </head>
  <body>

    <div class="clock"></div>
    <h3 class="title _1" >Binary Clock</h3>
    <script>
      const clock = document.querySelector('.clock').........完整代码请登录后点击上方下载按钮下载查看