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";
	// 1,4 are true apply border-left
	let verticalMiddle = ''
	if (digitMap["1"] && digitMap["2"]) {
		verticalMiddle = 'border-left border-right';
	} else if (digitMap["1"]) {
		verticalMiddle = 'border-left';
	} else if (digitMap["2"]) {
		verticalMiddle = 'border-right';
	}
	let verticalBottom = ""
	// 2,5 are true apply border-right
			if (digitMap["4"] && digitMap["5"]) {
		verticalBottom = 'border-left border-right';
	} else if (digitMap["4"]) {
		verticalBottom = 'border-left';
	} else if (digitMap["5"]) {
		verticalBottom = 'border-right';
	}
	return (
		<div className="digit-container">
        <div className={`${top}`}></div>
        <div className={`vertical ${verticalMiddle}`}></div>
        <div className={`${middle}`}></div>
        <div className={`vertical ${verticalBottom}`}></div>
        <div className={`${bottom}`}></div.........完整代码请登录后点击上方下载按钮下载查看