Javascript 访客柜台的风格React.js

发布于05月03日

我想为我的网站创建访客柜台.我使用api来获取命中计数器.我想创造这样的东西

我try 使用下面的代码，但结果是这样的

我想问我需要做什么才能让它成为我想要的设计.我做错了什么代码？

function Card(props:any) {
  const count = `${props.number}`.split('');
 
  return (
    <div style={{ display: "flex" }}>
      {count.map((val) => (
        <div
          style={{
            fontSize: 42,
            marginRight: 10,
            background: "#8D0000",
            color: "white",
            width: 40,
            height: 55,
            fontWeight: "bold",
            textAlign: "center"
          }}
        >
          {val}
        </div>
      ))}
    </div>
  );
}

const Footer = () => {
  const [visitor, setvisitor] = useState<visitortype>();

  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
    .then(response => response.json())
    .then(allvisitor=>  console.log(allvisitor))
    .catch(error => console.log(error));
  }, []);

 return (
    <GridItem
      w="100%"
      h={{ base: "80px", lg: "300px" }}
      colSpan={{ base: 8, lg: 4 }}
    >
      <VStack
        align={{ base: "center", lg: "stretch" }}
        marginTop={{ base: "0", lg: "60px" }}
        marginLeft={{ base: "0", lg: "50px" }}
      >
       <Card number={visitor?.count}/>

      </VStack>
    </GridItem>
  );
};

I also try using react-flip-number but still not like the style I want

<FlipNumbers 
  height={25} 
  width={20}  
  color="white" 
  background="#8D0000"
  numberStyle={{
    fontSize: 16,
  }}
  play perspective={100} 
  numbers={`${visitor?.count ?? 0}`}
/>;

// Now "value" is a object, what stored a properties (as "value={577}" attribute) const Card = (value) => { // Now can get "value" attribute from "value" object - not readable console.log(value.value) // 577 }

function Card(props) { // Can use properties as parameter of props object console.log(props.number) // 577 console.log(props.anotherProp) // true } // or function Card({ number, anotherProp }) { // Can use properties when directly declared them in function // That's called "Destructuring assignment" console.log(number) // 577 console.log(anotherProp) // true }

// Import the React and ReactDOM modules const { useState, useEffect } = React; // The component receives the passed values as object (props) function Card(props) { const digits = `${props.number}`.split(''); return ( <div style={{ display: "flex" }}> {digits.map((val) => ( <div style={{ fontSize: 42, marginRight: 10, background: "#8D0000", color: "white", width: 40, height: 55, fontWeight: "bold", textAlign: "center" }} > {val} </div> ))} </div> ); } // Instead of declaring the object (props), you can directly declare the parameters within { and } // That's called "Destructuring assignment" function AnotherCard({ number }) { const digits = `${number}`.split(''); return ( <div style={{ display: "flex" }}> {digits.map((val) => ( <div style={{ fontSize: 42, marginRight: 10, background: "#8D0000", color: "white", width: 40, height: 55, fontWeight: "bold", textAlign: "center" }} > {val} </div> ))} </div> ); } // App component function App() { return ( <div style={{ display: "grid", gap: "10px" }}> 例如 #1 (Card component with props object) <Card number={577} /> 例如 #2 (AnotherCard component with destructuring assignment) <AnotherCard number={688} /> </div> ); } // Render the application to the DOM ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script> <div id="root"></div>

// Import the React and ReactDOM modules const { useState, useEffect } = React; // The component receives the passed values as object (props) function Card(props) { const digits = `${props.number}`.split(''); return ( <div style={{ display: "flex" }}> {digits.map((val) => ( <div style={{ fontSize: 42, marginRight: 10, background: "#8D0000", color: "white", width: 40, height: 55, fontWeight: "bold", textAlign: "center" }} > {val} </div> ))} </div> ); } // Instead of declaring the object (props), you can directly declare the parameters within { and } // That's called "Destructuring assignment" function AnotherCard({ number }) { const digits = `${number}`.split(''); return ( <div style={{ display: "flex" }}> {digits.map((val) => ( <div style={{ fontSize: 42, marginRight: 10, background: "#8D0000", color: "white", width: 40, height: 55, fontWeight: "bold", textAlign: "center" }} > {val} </div> ))} </div> ); } // App component function App() { // Declare visitor with default object const [visitor, setVisitor] = useState({ count: 0, click: 0 }); // Request data of visitor useEffect(() => { fetch('https://count.cab/hit/ghG6Oirn0b') .then(response => response.json()) .then(v => setVisitor(v)); }, []); // Will see that the code runs first, and the fetch will update the visitor value asynchronously console.log(visitor) return ( <div style={{ display: "grid", gap: "10px" }}> 例如 #1 (Card component with props object) <Card number={visitor.count} /> 例如 #2 (AnotherCard component with destructuring assignment) <AnotherCard number={visitor.count} /> </div> ); } // Render the application to the DOM ReactDOM.render(<App />, document.getElementById("root"));

// Import the React and ReactDOM modules const { useState, useEffect } = React; // How many digits in total do we want to display const DIGIT_COUNT = 5 // The component receives the passed values as object (props) function Card(props) { let digits = `${props.number}`.split(''); // Determine the number of digits const numDigits = digits.length; // If the number has less than DIGIT_COUNT digits, add leading zeros if (numDigits < DIGIT_COUNT) { digits = Array(DIGIT_COUNT - numDigits).fill(0).concat(digits); } return ( <div style={{ display: "flex" }}> {digits.map((val, index) => ( <div key={index} style={{ fontSize: 42, marginRight: 10, background: "#8D0000", color: "white", width: 40, height: 55, fontWeight: "bold", textAlign: "center" }} > {val} </div> ))} </div> ); } // Instead of declaring the object (props), you can directly declare the parameters within { and } // That's called "Destructuring assignment" function AnotherCard({ number }) { let digits = `${number}`.split(''); // Determine the number of digits const numDigits = digits.length; // If the number has less than DIGIT_COUNT digits, add leading zeros if (numDigits < DIGIT_COUNT) { digits = Array(DIGIT_COUNT - numDigits).fill(0).concat(digits); } return ( <div style={{ display: "flex" }}> {digits.map((val, index) => ( <div key={index} style={{ fontSize: 42, marginRight: 10, background: "#8D0000", color: "white", width: 40, height: 55, fontWeight: "bold", textAlign: "center" }} > {val} </div> ))} </div> ); } // App component function App() { // Declare visitor with default object const [visitor, setVisitor] = useState({ count: 0, click: 0 }); // Request data of visitor useEffect(() => { fetch('https://count.cab/hit/ghG6Oirn0b') .then(response => response.json()) .then(v => setVisitor(v)); }, []); return ( <div style={{ display: "grid", gap: "10px" }}> 例如 #1 (Card component with props object) <Card number={visitor.count} /> 例如 #2 (AnotherCard component with destructuring assignment) <AnotherCard number={visitor.count} /> </div> ); } // Render the application to the DOM ReactDOM.render(<App />, document.getElementById("root"));

Javascript 访客柜台的风格React.js

推荐答案

反思您的问题

溶液

更多信息

例如

例如 with API

例如 with API & extra zero digits

Javascript相关问答推荐

当没有固定间隔时，是否可以在d3.js中进行画笔捕捉？

订阅操作顺序

验证嵌套 colored颜色代码的结果

导入图像与内联包含它们NextJS

在JS中转换mysql UTC时间字段？

试图为每支球队生成类似于2024/25年欧洲足联冠军联赛瑞士系统格式的独特比赛配对

为什么子组件没有在reaction中渲染？

创建私有JS出口

我在我的Java代码中遇到了问题，代码的一部分看不到先前定义的对象

XSLT处理器未运行

Javascript json定制

从Nextjs中的 Select 项收集值，但当单击以处理时，未发生任何情况

如何在不影响隐式类型的情况下将类型分配给对象？

Puppeteer上每页的useProxy返回的不是函数/构造函数

如何在DYGRAPS中更改鼠标事件和键盘输入

使每个<；li>；元素的 colored颜色与随机生成的 colored颜色列表不同(不重复

如何用javascript更改元素的宽度和高度？

如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态？

构建器模式与参数对象输入

React Refs不与高阶组件(HOC)中的动态生成组件一起工作