js+css实现方形显示日期时间的时钟效果代码-html代码-BFW代码库

js+css实现方形显示日期时间的时钟效果代码

代码语言：html

代码描述：js+css实现方形显示日期时间的时钟效果代码，秒针实时走动

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Overpass:wght@900&display=swap");
    *::after,
    *::before,
    * {
      margin: 0;
      padding: 0;
      box-sizing: inherit;
    }
    
    body {
      box-sizing: border-box;
      background-color: #E0E0E0;
      font-family: "Overpass", sans-serif;
    }
    
    .container {
      width: 100%;
    }
    
    .clock {
      width: 30rem;
      height: 30rem;
      margin: 5rem auto;
      padding: 1rem;
      background-color: #333;
      border: 2rem solid white;
      border-radius: 25%;
      box-shadow: 2px 0px 10px 2px #b3b3b3, 0px 0px 8px 0px black inset;
      display: grid;
      grid-template-rows: fit-content(100%);
      grid-template-columns: fit-content(100%);
      align-items: start;
      justify-content: space-evenly;
      grid-gap: 1rem;
      grid-template-areas: ". year year year year ." "month month month num num num" "analog analog analog num num num" "analog analog analog day day day";
    }
    .clock__item {
      border: 1px solid black;
      box-shadow: -8px 0px 8px 0px black inset;
    }
    .clock__year {
      grid-area: year;
      font-size: 3.2rem;
      display: grid;
      justify-content: center;
      align-items: center;
      color: white;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, auto-fit);
      grid-template-areas: "one two three four" "one two three four";
    }
    .clock__year--item {
      border: 1px solid rgba(0, 0, 0, 0.5);
      text-align: center;
    }
    .clock__year--01 {
      grid-area: one;
    }
    .clock__year--02 {
      grid-area: two;
    }
    .clock__year--03 {
      grid-area: three;
    }
    .clock__year--04 {
      grid-ar.........完整代码请登录后点击上方下载按钮下载查看