css+js实现创新迷你时钟拼筹时钟显示时间代码-html代码-BFW代码库

css+js实现创新迷你时钟拼筹时钟显示时间代码

代码语言：html

所属分类：其他

代码描述：css+js实现创新迷你时钟拼筹时钟显示时间代码

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

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

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

  
  
  
  
<style>
*, *:after, *:before {
  box-sizing: border-box;
}

:root {
  font-size: min(12vw, 7vh);
  --clock-size:1.65rem;
  --clock-gap:0.1rem;
  --hand-width: 0.1rem;
  --hand-height: calc((var(--clock-size) / 2) - 0.1rem);
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: #e6e3df;
}

.container {
  display: flex;
  gap: var(--clock-gap);
}

.digit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clock-gap);
  width: calc( (var(--clock-size) * 2) + var(--clock-gap));
  --a1: 3;
  --b1: 1;
  --a2: 3;
  --b2: 1;
  --a3: 3;
  --b3: 1;
  --a4: 3;
  --b4: 1;
  --a5: 3;
  --b5: 1;
  --a6: 3;
  --b6: 1;
}
.digit[data-digit="0"] {
  --a1: 2;
  --b1: 1;
  --a2: 2;
  --b2: 3;
  --a3: 0;
  --b3: 2;
  --a4: 0;
  --b4: 2;
  --a5: 0;
  --b5: 1;
  --a6: 0;
  --b6: 3;
}
.digit[data-digit="1"] {
  --a1: 2.6;
  --b1: 2.6;
  --a2: 2;
  --b2: 2;
  --a3: 2.6;
  --b3: 2.6;
  --a4: 0;
  --b4: 2;
  --a5: 2.6;
  --b5: 2.6;
  --a6: 0;
  --b6: 0;
}
.digit[data-digit="2"] {
  --a1: 1;
  --b1: 1;
  --a2: 2;
  --b2: 3;
  --a3: 1;
  --b3: 2;
  --a4: 0;
  --b4: 3;
  --a5: 0;
  --b5: 1;
  --a6: 3;
  --b6: 3;
}
.digit[data-digit="3"] {
  --a1: 1;
  --b1: 1;
  --a2: 2;
  --b2: 3;
  --a3: 1;
  --b3: 1;
  --a4: 0;
  --b4: 3;
  --a5: 1;
  --b5: 1;
  --a6: 0;
  --b6: 3;
}
.digit[data-digit="4"] {
  --a1: 2;
  --b1: 2;
  --a2: 2;
  --b2: 2;
  --a3: 0;
  --b3: 1;
  --a4: 0;
  --b4: 2;
  --a5: 2.6;
  --b5: 2.6;
  --a6: 0;
  --b6: 0;
}
.digit[data-digit="5"] {
  --a1: 1;
  --b1: 2;
  --a2: 3;
  --b2: 3;
  --a3: 0;
  --b3: 1;
  --a4: 3;
  --b4: 2;
  --a5: 1;
  --b5: 1;
  --a6: 0;
  --b6: 3;
}
.digit[data-digit="6"] {
  --a1: 1;
  --b1: 2;
  --a2: 3;
  --b2: 3;
  --a3: 0;
  --b3: 2;
  --a4: 3;
  --b4: 2;
  --a5: 0;
  --b5: 1;
  --a6: 0;
  --b6: 3;
}
.digit[data-digit="7"] {
  --a1: 1;
  --b1: 1;
  --a2: 3;
  --b2: 2;
  --a3: 2.6;
  --b3: 2.6;
  --a4: 0;
 .........完整代码请登录后点击上方下载按钮下载查看