vue3制作九宫格抽奖

该代码示例展示了如何使用Vue.js创建一个具有加速减速效果的九宫格抽奖程序。点击开始按钮后,奖品名称按顺序显示并逐渐加速,最终在设定的圈数后随机停在一个奖项上。奖品的概率是通过将每个奖项的数量添加到奖池中来实现的。
摘要由CSDN通过智能技术生成

效果:首先看到一个是顺时针0-7的九宫格,八个奖品和一个开始按钮,点击之后会从0-7按顺序加样式,会由慢到快,然后匀速,在由快到慢,最后定格,抽奖会有概率。

好,话不多,说上代码

<template>
  <div class="chous">
    <div class="ch">
      <p :class="'item' + color[0]">{
  { list[0].name }}</p>
      <p :class="'item' + color[1]">{
  { list[1].name }}</p>
      <p :class="'item' + color[2]">{
  { list[2].name }}</p>
    </div>
    <div class="ch">
      <p :class="'item' + color[7]">{
  { list[7].name }}</p>
      <p @click="aa()">开始</p>
      <p :class="'item' + color[3
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值