基于React.js实现兔兔牌九宫格翻牌抽奖组件

目录
  • 基础页面结构
  • 初始化数据
  • 翻转逻辑
  • count 为 0
  • 100% 中奖
  • 效果图

基础页面结构

import React, { useEffect, useState } from "react"
import './index.css'

const FlopLuckyDraw9 = () => {

  return (
    <>
      <div className="title">
        可抽奖
        <label >{count}</label>
        次
      </div>
      <div className="box">
        {
          list.map((item) => {
            return (
              <div className="item" key={item.id}>
                <div className={`style1`}>抽奖</div>
                <div className={`style2`}>{item.name}</div>
              </div>
            )
          })
        }
      </div>
    </>
  )
}

export default FlopLuckyDraw9

初始化数据

import React, { useEffect, useState } from "react"
import './index.css'

const data = [
  { id: 1, name: '1元优惠券' },
  { id: 2, name: '10元优惠券', },
  { id: 3, name: '谢谢惠顾' },
  { id: 4, name: '豪华电动车' },
  { id: 5, name: '1w购物券' },
  { id: 6, name: '5w购物券' },
  { id: 7, name: '豪华轿车' },
  { id: 8, name: '房子一套' },
  { id: 9, name: '顶配笔记本' }
]

const FlopLuckyDraw9 = () => {
  const [count, setCount] = useState(3)
  const [list, setList] = useState([])

  useEffect(() => {
    setList(data.map((i) => {
      return {
        ...i,
        showName: false,
        showResult: false
      }
    }))
  }, [])

  return (
    <></>
  )
}

export default FlopLuckyDraw9

翻转逻辑

点击 item 时,将 showName 变为 true,改变类名,实现翻转效果。

const FlopLuckyDraw9 = () => {

  const handleClick = (item) => {
    setList(list.map((i) => {
      if (i.id === item.id) {
        return {
          ...i,
          showName: true,
        }
      } else {
        return i
      }
    }))
  }

  return (
    <>
      <div className="box">
        {
          list.map((item) => {
            return (
              <div className="item" onClick={() => handleClick(item)} key={item.id}>
                <div className={`style1 ${item.showName ? 'hide' : null}`}>抽奖</div>
                <div className={`style2 ${item.showName ? 'show' : null}`}>{item.name}</div>
              </div>
            )
          })
        }
      </div>
    </>
  )
}

export default FlopLuckyDraw9

count 为 0

当 count 为 0 时,将所有的牌全部都翻转出来,同时添加未选中的类名。

const FlopLuckyDraw9 = () => {
  const [count, setCount] = useState(3)

  useEffect(() => {
    setTimeout(() => {
      // 监听 count
      if (count === 0) {
        setList(list.map((i) => {
          if (!i.showName) {
            return {
              ...i,
              showName: true,
              showResult: true
            }
          } else {
            return {
              ...i,
              showName: true,
            }
          }
        }))
      }
    }, 1000);
  }, [count])

  const handleClick = (item) => {
    if (count === 0) {
      return;
    }
    // ....
    setCount(count => count - 1)
  }

  return (
    <>
      <div className="title">
        可抽奖
        <label >{count}</label>
        次
      </div>
      <div className="box">
        {
          list.map((item) => {
            return (
              <div>
                <div className={`style2 ${item.showName ? 'show' : null} ${item.showResult ? 'show-result' : null}`}>{item.name}</div>
              </div>
            )
          })
        }
      </div>
    </>
  )
}

export default FlopLuckyDraw9

100% 中奖

100% 中奖?代码是自己的,改吧改吧就可以了。

const data = [
  { id: 1, name: '1元优惠券', is: true },
  { id: 2, name: '10元优惠券', },
  { id: 3, name: '谢谢惠顾', is: true },
  { id: 4, name: '豪华电动车' },
  { id: 5, name: '1w购物券' },
  { id: 6, name: '5w购物券' },
  { id: 7, name: '豪华轿车' },
  { id: 8, name: '房子一套', is: true },
  { id: 9, name: '顶配笔记本' }
].sort(v => Math.random() - 0.5)

const FlopLuckyDraw9 = () => {
  const [winAPrize, setWinAPrize] = useState([])

  const handleClick = (item) => {
    // ...
    const winAPrizeItem = winAPrize.pop()
    setList(list.map((i) => {
      if (i.id === item.id) {
        return {
          ...i,
          showName: true,
          name: winAPrizeItem.name
        }
      } else {
        return i
      }
    }))
    // ...
  }

  useEffect(() => {
    setWinAPrize(data.filter(v => v.is))
  }, [])

  return (
    <></>
  )
}

export default FlopLuckyDraw9

效果图

以上就是基于React.js实现兔兔牌九宫格翻牌抽奖组件的详细内容,更多关于React.js九宫格翻牌抽奖的资料请关注我们其它相关文章!

(0)

相关推荐

  • JavaScript实现九宫格抽奖功能的示例代码

    目录 效果图 实现流程 主要代码 效果图 话不多说,直接上效果: 实现流程 主要流程为: 1. 根据效果图,构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素 在指定的时间间隔下 颜色随机变化 4.2 延时器 2秒后 清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个 主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch

  • Vue3实现九宫格抽奖的示例代码

    目录 前言 前期构思 具体实现 1.布局 2.指定奖品 3.抽奖 最终效果 前言 对象说晚饭吃什么太难选择,问我能不能做一个九宫格抽奖来决定我们晚上吃什么,emmm. 既然对象都开口了,不做也不行啊,最后给大家看一个简化版的(没有美工样式.编辑奖品这些) 前期构思 首先是布局,这个比较简单,用弹性布局(flex)就足够了,抽奖盒子固定宽高,奖品项为盒子的1/3,超过换行就行,转动方向是这样的: 抽奖方式主要分为两种,一种是随机抽取(完全随机),还有一种是指定奖品抽取(瞒着女朋友加的功能

  • JS实现简单的九宫格抽奖

    本文实例为大家分享了JS实现简单九宫格抽奖的具体代码,供大家参考,具体内容如下 结构 <body>     <div id="fa">         <div class="option">1</div>         <div class="option">5</div>         <div class="option">3<

  • React Native之ListView实现九宫格效果的示例

    概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性: dataSource:数据源,类似于安卓中我们传入BaseAdapter的数据集合. renderRow:渲染某一行,类似于BaseAdapter中的getItem方法. onEndReached:简单说就是用于分页操作,在安卓中原生开发中,我们需要

  • vue组件实现移动端九宫格转盘抽奖

    本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下 vue-lucky-draw 移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定. 效果图 抽奖 因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置,也就是要模拟出这个中奖的过程(所以所谓的抽奖都是骗人的,嘿嘿).先要写出移动的背景框对应的各个位置的css,然后动态切换class来使其呈现出转动效果.明白了过程就好写了. 中间的按钮用的是css3的ani

  • 基于React.js实现兔兔牌九宫格翻牌抽奖组件

    目录 基础页面结构 初始化数据 翻转逻辑 count 为 0 100% 中奖 效果图 基础页面结构 import React, { useEffect, useState } from "react" import './index.css' const FlopLuckyDraw9 = () => { return ( <> <div className="title"> 可抽奖 <label >{count}</l

  • 基于React.js实现简单的文字跑马灯效果

    刚好手上有一个要实现文字跑马灯的react项目,然后ant-design上面没有这个组件,于是只能自己手撸一个. 我想到的最简单的方法,就是定位啦,定时移动这个文字块不就跑起来了. 需要注意的是,要判断文字的宽度,当文字超出屏幕的宽度的时候再动起来,我用的是hook的写法,要在销毁页面的时候清掉定时器.定时器要放在useRef里面. const timer = useRef<any>(null); const [left, setLeft] = useState(0); const conte

  • 基于React.js实现原生js拖拽效果引发的思考

    一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置

  • 详解基于React.js和Node.js的SSR实现方案

    基础概念 SSR:即服务端渲染(Server Side Render) 传统的服务端渲染可以使用Java,php 等开发语言来实现,随着 Node.js 和相关前端领域技术的不断进步,前端同学也可以基于此完成独立的服务端渲染. 过程:浏览器发送请求 -> 服务器运行 react代码生成页面 -> 服务器返回页面 -> 浏览器下载HTML文档 -> 页面准备就绪 即:当前页面的内容是服务器生成好给到浏览器的. 对应CSR:即客户端渲染(Client Side Render) 过程:浏

  • 基于react后端渲染模板引擎noox发布使用

    React 组件化思想受到越来越多开发者的关注,组件化思想帮助开发者将页面解耦成一个一个组件,代码更加模块化, 更易扩展.而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的问题是: 需要学习各类模板引擎定义的语法,如 {{if}}, {{loop}} 对组件化支持不够强,实现复杂,不易用 针对以上痛点,笔者基于 React 造出了 noox 这样一个工具,专注于后端模板的解析,让模板解析更加简单,易用. 使用方法 安装 npm install noox 简单的 demo

  • 详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commun

  • 基于React Native 0.52实现轮播图效果

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的(Git地址) 一.总览 轮播图几乎是必备的效果,这里选择 react-native-swiper 来实现,效果如下图: 二.实现轮播图效果 1.通过npm安装react-native-swiper npm install react-native-swiper --save 2.在recommend.js引入react-native-swiper import Swiper from 'rea

  • 基于three.js编写的一个项目类示例代码

    WebVR 在开始之前,先对WebVR进行介绍,WebVR是一个实验性的Javascript API,允许HMD(head-mounted displays)连接到web apps,同时能够接受这些设备的位置和动作信息.这让使用Javascript开发VR应用成为可能(当然已经有很多接口API让Javascript作为开发语言了,不过这并不影响我们为WebVR感到兴奋).而让我们能够立马进行预览与体验,移动设备上的chrome已经支持了WebVR并使手机作为一个简易的HMD.手机可以把屏幕分成左

  • 基于Vue.js+Nuxt开发自定义弹出层组件

    今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

  • React.js组件实现拖拽排序组件功能过程解析

    因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使

随机推荐