demo0812模拟红包界面

VIP文章悬崖长出花

已于 2022-08-12 11:48:53 修改

阅读量350

点赞数

分类专栏： React 文章标签： javascript react.js 前端

于 2022-08-12 11:47:55 首次发布

本文链接：https://blog.csdn.net/KKKKu1977/article/details/126300621

版权

写作业的第二天

在这里插入图片描述

// ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

// ./src/App.js
import './App.css';
import Simulator from './pages/Simulator'
//红包模拟器
function App() {
   
  return (
    <div className="App">
      <Simulator/>
    </div>
  );
}

export default App;

// ./src/App.css
.App {
   
  text-align: center;
  display: flex;
  background: #efefef;
  height: 100vh;
}

//./src/pages/Simulator.js
import React,{
   useState} from 'react'
import '../base/Simulator.css'
import avater from '../static/avatar.png'
const packet=(total,num) =>{
   
  let imp = 0;
  let imparr = [];
  let account = 0;
  for(let i=0;i<num;i++) {
   
      let ac = Number(parseInt((Math.random()*100).toString()));
      imparr.push(ac);
      imp += ac;
  }
  return imparr.map((item, index)=>{
   
      if(index===imparr.length - 1){
   
          return Math.round(total*100 - account)/100;
      }else{
   
          let lo = Number(parseInt((item/imp*total*100).toString())) / 100 || 0.01;
          account = account + lo*100;
          return lo
      }
  })
}
export default function Simulator(){
   
  const [num,setNum] = useState('')
  const