一个九宫格抽奖的轮子

邱秋1年前 11:48

一个九宫格抽奖的轮子

在线 demo

demo

安装

NPM

npm i k-luckdraw -S

CDN

<script src="//unpkg.com/k-luckdraw/index.js"></script>

参数 options

var options = {
  id: "", //render 的dom的ID,必填***
  data: [], //奖品的数据,必填***
  index: -1, //当前转动到哪个位置,起点位置
  speed: 300, //初始转动速度
  times: 0, //转动次数
  cycle: 50, //转动基本次数:即至少需要转动多少次再进入抽奖环节
  prize: -1, //中奖位置,必填***, 不然停不下来
  isBengin: false, //已经开始了,就不能进行第二次抽,
  callBack: null, //回调,轮子转完了得弹个什么框的
  autoLuck: false, // 默认是否点中间的start 开始抽奖
};

var luck = new luckDraw(options);

options.data.item

var item = {
    title:'10万人民币',  //奖品的标题
    icon:'',  //奖品对应的图片
    index:'' //奖品序号
}
options.data = [...item...]

示例

<!-- html -->
<div id="luck-box"></div>

<!-- js -->
<script>
  var luck = new luckDraw({ id: "luck-box", autoLuck: true, prize: 7 });
  // luck.start()  //开始
</script>

for vue

<template>
    <div id="luck-box"></div>
</template>
<script>
import luckdraw from 'k-luckdraw'
export default {
    mounted(){
        let luck = new luckdraw({id:'luck-box',prize: 5,autoLuck:true})
        //luck.start()
    }
}
<script>

demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>九宫格抽奖demo</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta
      data-n-head="true"
      name="viewport"
      content="width=device-width, initial-scale=1"
    />

    <script src="index.js"></script>
    <style>
      .luck-box {
        width: 640px;
        height: 582px;
        margin: 50px auto;
        padding: 24px;
      }

      .luck-draw {
        width: 600px;
      }

      .luck-draw .luck-draw-item {
        height: 176px;
        width: 196px;
        background: linear-gradient(120deg, #ee614a, #ff6951);
        text-align: center;
        -webkit-box-sizing: border-box;
        margin: 0 2px 2px 0;
        font-size: 0;
        float: left;
      }

      .luck-draw .luck-draw-item:nth-child(2n) {
        background: linear-gradient(120deg, #db3f3f, #ed4444);
      }

      .luck-draw .luck-draw-start {
        background: url(start.jpg) no-repeat center center;
        background-size: contain;
        cursor: pointer;
      }

      .luck-draw .luck-draw-item-icon {
        width: 95%;
        margin: 0.3rem auto 0;
        height: 70%;
        display: inline-block;
      }

      .luck-draw .luck-draw-item-icon img {
        max-height: 90%;
        max-width: 100%;
        border-radius: 6px;
        margin: 18px 0;
        display: inline-block;
        background: #ffb4b4;
        width: 90px;
        height: 90px;
      }

      .luck-draw .luck-draw-item-name {
        color: #fff;
        padding-top: 8px;
        font-size: 16px;
        display: block;
      }

      .luck-draw .luck-draw-item-active {
        background: #ffb000 !important;
      }
    </style>
  </head>

  <body>
    <div id="luck-box"></div>
    <script>
      var luck = new luckDraw({
        id: "luck-box",
        autoLuck: true,
        prize: 7,
        callback: function () {
          alert("中了一等奖");
        },
      });
      // luck.start()  //开始
    </script>
  </body>
</html>

本文于1年前 11:48发布在[project]分类下,当前已被围观1189次

相关标签:javascript

永久地址:https://www.chuchur.com/article/luckdraw

版权声明:自由转载-署名-非商业性使用