七夕和对象去干什么？让这个页面替你决定吧

一大早来到办公室，

部分女同事的桌面上已经

摆好了鲜花、礼物，

等待着她们惊喜的尖叫。

而自己的桌面上，

只有昨天忘了扔的快餐盒

……

下班后，

单身人群的舒适空间进一步逼仄起来，

地铁广告牌、商业街LED屏、手机推文，

……

无一不在默默提醒你，

嘿，兄弟，

今年又没找到对象吧？

---

对于那些已经有对象的兄弟们，

明天你是该陪对象呢？还是应该陪bug呢？

决定陪对象的兄弟们，

明天你们应该干嘛呢

简简单单写个随机函数决定一下

---

second：随机的秒数

data：抽选的数据

desc：描述

const DrawALotteryOrRaffle = () => {
  return (
    <div className="container">
      <DrawALotteryOrRaffleComp second={2} data={timeArr} desc={'⏰'} />
      <DrawALotteryOrRaffleComp second={3} data={placeArr} desc={'🌍'} />
      <DrawALotteryOrRaffleComp second={4} data={matterArr} desc={'💗'} />
    </div>
  )
}

export default DrawALotteryOrRaffle

useEffect 调用 start 函数，启动定时器。利用 Math.random() 获取随机数，从传入的数据中获取随机一个选项。

const DrawALotteryOrRaffleComp = ({ second, data, desc }) => {
  let timer = useRef(null);
  const [showValue, setShowValue] = useState('');

  const choice = () => {
    let index = Math.floor(Math.random() * data.length);
    let prize = data[index];
    setShowValue(prize)
    timer.value = setTimeout(choice, 50)
  }

  const start = () => {
    setTimeout(() => {
      clearTimeout(timer.value)
    }, second * 1000);
    if (timer.value == undefined) {
      choice()
    }
  }

  useEffect(() => {
    start()
  }, [])

  return (
    <div class="card">
      <div class="content">
        <h2>{desc}</h2>
        <h3>{showValue}</h3>
      </div>
    </div>
  )
}

index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #161623;
}

写点样式，修饰一下

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#f00, #f0f);
  clip-path: circle(30% at right 70%);
}

body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#2196f3, #e91e63);
  clip-path: circle(20% at 10% 10%);
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  flex-wrap: wrap;
  z-index: 1;
}

.container .card {
  position: relative;
  width: 280px;
  height: 400px;
  margin: 30px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: rgba(255, 255, 255, 0.5) 1px solid;
  border-left: rgba(255, 255, 255, 0.5) 1px solid;
  backdrop-filter: blur(5px);
}

.container .card .content {
  padding: 20px;
  text-align: center;
  transition: 0.5s;
  transform: translateY(0px);
  opacity: 1;
}

.container .card .content h2 {
  font-size: 2.5em;
  color: #fff;
  pointer-events: none;
}

.container .card .content h3 {
  font-size: 4em;
  color: #fff;
}