一个九宫格抽奖的轮子
在线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:'1' //奖品序号
}
options.data = [...item...]
示例
<!-- html -->
<div id="luck-box"></div>
<!-- js -->
<script>
var luck = new luckDraw({ id: 'luck-box', autoLuck: true, prize: 7 })
// or
/*
var luck = new luckDraw({ id: 'luck-box', autoLuck: false })
luck.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="//unpkg.com/k-luckdraw/index.js"></script>
<style>
.luck-box {
width: 640px;
height: 582px;
margin: 50px auto 0;
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: .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;
}
.test {
width: 350px;
margin: 0 auto;
}
.test input {
border: 1px solid #ddd;
padding: 10px;
border-radius: 10px;
width: 200px;
}
.test button {
border: 1px solid #ddd;
padding: 9px;
border-radius: 10px;
width: 76px;
}
</style>
</head>
<body>
<div id="luck-box" class="luck-box">
</div>
<div class="test">
<div class="info">
</div>
<input placeholder="输入抽奖序号" id="prize" />
<button id="start">开始抽奖</button>
</div>
<script>
// index 的顺序 就是奖品的顺序
var data = [
{ title: '1号奖品', icon: '', index: 1 },
{ title: '8号奖品', icon: '', index: 8 },
{ title: '2号奖品', icon: '', index: 2 },
{ title: '5号奖品', icon: '', index: 5 },
{ title: '4号奖品', icon: '', index: 4 },
{ title: '6号奖品', icon: '', index: 6 },
{ title: '3号奖品', icon: '', index: 3 },
{ title: '7号奖品', icon: '', index: 7 },
];
var luck = new luckDraw({
id: 'luck-box',
autoLuck: false,
// prize: 7,
data: data,
callBack: function () {
var prize = document.querySelector('#prize').value
setTimeout(() => {
alert('恭喜你抽中' + prize + '号奖品')
}, 0);
}
})
// luck.start() //开始
document.querySelector('#start').addEventListener('click', function () {
var prize = document.querySelector('#prize').value
prize = Number(prize)
if (prize > 8 || prize < 1 || isNaN(prize)) {
return alert('奖品序号1-8数字')
}
luck.prize = prize
luck.start()
})
</script>
</body>
</html>
我，秦始皇，打钱！
