react实现火柴拼凑led时钟时间代码-html代码-BFW代码库

react实现火柴拼凑led时钟时间代码

代码语言：html

所属分类：其他

代码描述：react实现火柴拼凑led时钟时间代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>

.clock {
  display: flex;
}

.digit-container {
  margin: 0 20px;
  height: 150px;
  width: 75px;
}

.vertical {
  height: 65px;
        margin: 2.5px 0;
}

.clear {
        border: 5px solid transparent;
}

.border {
  border: 5px solid red;
}

.border-left {
  border-left: 8px solid red;
}

.border-right {
  border-right: 8px solid red;
}
</style>




</head>

<body  >
  <div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script>
      <script type="text/babel" >
/*
5: {0: true, 1: true, 2: false, 3: true, 4: false, 5: true, 6: true}
*/
const numbers = {
    0: {0: true, 1: true, 2: true, 3: false, 4: true, 5: true, 6: true},
    1: {0: false, 1: false, 2: true, 3: false, 4: false, 5: true, 6: false},
    2: {0: true, 1: false, 2: true, 3: true, 4: true, 5: false, 6: true},
    3: {0: true, 1: false, 2: true, 3: true, 4: false, 5: true, 6: true},
    4: {0: false, 1: true, 2: true, 3: true, 4: false, 5: true, 6: false},
        5: {0: true, 1: true, 2: false, 3: true, 4: false, 5: true, 6: true},
    6: {0: true, 1: true, 2: false, 3: true, 4: true, 5: true, 6: true},
    7: {0: true, 1: false, 2: true, 3: false, 4: false, 5: true, 6: false},
        8: {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true},
        9: {0: true, 1: true, 2: true, 3: true, 4: false, 5: true, 6: false},
}

const Digit = ({digit}) => {
        const digitMap = numbers[digit];
        //{}
        // 0, 3, 6 are true apply border
        const top = digitMap["0"] ? "border" : "clear";
        const middle = digitMap["3"] ? "border" : "clear";
        const bottom = digitMap["6"] ? "border" : "clear&q.........完整代码请登录后点击上方下载按钮下载查看