vue实现简单转盘抽奖功能

本文实例为大家分享了vue实现简单转盘抽奖的具体代码，供大家参考，具体内容如下

样式请大家忽略（自己调），主要看JS代码实现，点击按钮后调用start方法，判断是否在转动状态，如果没转动则调用go方法，go方法主要封装了一次性定时器，是个递归函数，调用go函数后即可实现抽奖转盘的效果了，详细代码如下：

注释清晰哦

<template>
  <div class="home">
    <button @click="start">开始</button>
    <div
      class="grid"
      v-for="(item, i) in arr"
      :key="i"
      :class="[bg == i + 1 ? 'active' : null]"
    ></div>
  </div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {
      // 标记转动的位置
      bg: 1,
      // 循环的奖品数组
      arr: [1, 2, 3, 4, 5],
      // 是否正在转动的标记
      isSport: false,
      // 转动速度减慢
      reduce: 10,
      // 转动间隔时间
      startTime: 30,
      area:''
    };
  },
  methods: {
    start() {
      if (this.isSport == false) {
        this.isSport = true;
      } else {
        // 正在转动时点击按钮无效
        return;
      }
      // 模拟的设定转动的位置
      this.area= parseInt(Math.random()*4+1);
      this.go();
    },
    go() {
      setTimeout(() => {
        // 让转动速度减慢
        this.startTime = this.startTime + this.reduce;
        this.bg = (this.bg % 5) + 1;//这个%时求余的意识哦
        // 如果达到这个条件则停止跳动
        if (this.startTime >= 300 && this.bg == this.area) {
          // 标记是否转动状态
          this.isSport = false;
          // 重置转动间隔时间
          this.startTime = 30;
          return;
        }
        this.go();
      }, this.startTime);
    },
  },
};
</script>
<style scoped>
.grid {
  width: 50px;
  height: 50px;
  background: red;
  margin: 10px;
}
.active {
  background: blue;
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue简单实现转盘抽奖

    vue简单实现转盘抽奖

    本文实例为大家分享了vue简单实现转盘抽奖的具体代码,供大家参考,具体内容如下 1.0 思路整理 转盘抽奖很常见,之前也没写过,现在有空来写写,分析如下: 1.1 转盘旋转 ----- 可以用 transform 的 rotate 来解决 1.2 旋转动画 ----- transition 过渡来处理 1.3 停留目标位置及中奖提示 ? ------ 通过控制旋转角度控制停留位置,中奖提示,考虑添加回调 1.1 开始行动 上面的思考,我们知道了大概要实现的步骤,首先我们搞张图片 这个圆盘有 10

  • VUE实现大转盘抽奖

    VUE实现大转盘抽奖

    UI 老规矩,先看下静态UI,以便于有个图像概念 初始参考各值参考图 方案分析-参数配置 核心思路: 将指针和中奖区域划分两部分,目前常规的效果,控制中奖区域旋转,然后停在指针处,当然控制指针也可以,一套思路,dom结构也比较简单,唯一算是复杂点的就是中奖区域,但是如果你足够懒,像我一样,你可以传递一张图也可以,完全依赖远端数据: 关于旋转位置 每个移动位置应均分,360/个数 === 每个奖品所占据的位置,以本文为例8个奖品位置,每个区域应为45deg,每个指针中心位置应为±22.5deg(±

  • vue实现大转盘抽奖功能

    vue实现大转盘抽奖功能

    本文实例为大家分享了vue实现大转盘抽奖的具体代码,供大家参考,具体内容如下 效果图如下 中奖提示 代码如下 <template>   <div class="dial" v-wechat-title="$route.meta.title">     <div class="times">抽奖次数{{LuckyClick}}</div>     <!-- 转盘包裹 -->     <

  • Vue.js实现大转盘抽奖总结及实现思路

    Vue.js实现大转盘抽奖总结及实现思路

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示. 中奖结果弹窗,为抽奖组件服务. 实现步骤如下: 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息. api: export default { getPrizeList () { let priz

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

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

  • vue实现简单转盘抽奖功能

    vue实现简单转盘抽奖功能

    本文实例为大家分享了vue实现简单转盘抽奖的具体代码,供大家参考,具体内容如下 样式请大家忽略(自己调),主要看JS代码实现,点击按钮后调用start方法,判断是否在转动状态,如果没转动则调用go方法,go方法主要封装了一次性定时器,是个递归函数,调用go函数后即可实现抽奖转盘的效果了,详细代码如下: 注释清晰哦 <template>   <div class="home">     <button @click="start">

  • 基于VUE实现的九宫格抽奖功能

    先给大家展示下效果图: HTML代码: <template> <div class="luckDraw"> <title-bar :title="title"></title-bar> <div class="container"> <div class="turntable-wrapper"> <div class="luck-wrapp

  • jQuery+PHP实现微信转盘抽奖功能的方法

    本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div class="demo"> <div id="disk"></div> <div

  • Vue+Websocket简单实现聊天功能

    Vue+Websocket简单实现聊天功能

    本文实例为大家分享了Vue+Websocket简单实现聊天功能的具体代码,供大家参考,具体内容如下 效果图: 聊天室 此篇文章是针对Websocket的简单了解和应用,利用Nodejs简单搭建一个服务器加以实现. 首先创建一个vue项目 然后再创建一个server文件夹,在终端上打开该文件夹,输入vue init(一直敲 "回车" 键),最后再建一个server.js文件,如下图 代码如下: server.js/ 在server文件终端下 npm install --s ws var

  • js实现转盘抽奖功能

    本文实例为大家分享了js实现转盘抽奖功能的具体代码,供大家参考,具体内容如下 效果:点击抽奖按钮,转盘开始旋转数圈后停止 示例: 抽奖html代码: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q

  • jquery转盘抽奖功能实现

    jquery转盘抽奖功能实现

     一.用到的素材 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510

  • vue实现简单的购物车功能

    vue实现简单的购物车功能

    本文实例为大家分享了vue实现简单购物车功能的具体代码,供大家参考,具体内容如下 1.实现效果: 2.涉及到的知识点: toFixed函数.过滤器.reduce高阶函数.v-bind:disabled.v-if 3.代码: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-

  • vue实现简单的计算器功能

    vue实现简单的计算器功能

    本文实例为大家分享了vue实现简单计算器的具体代码,供大家参考,具体内容如下 1.功能 1)  .实现加减乘除混合(包含小数点)2).实现删除退格3).实现内容重置 2.效果图 说实话不好看 3.代码 1).HTML部分  <div id='app'>         <input type="text" v-model="band">         <table>             <tbody>      

随机推荐