废话
本篇是一个原生js构造函数，加css3实现的抽奖，在app,h5,小程序，小游戏里都可以直接用，都兼容，先看下是不是你们想要的效果吧
数字版
h5，app，小程序里的样子
普通js,html里的样子
正文
附上代码
html
<div class="game_wrap">
<div class="game_item">
<ul></ul>
</div>
<div class="game_item">
<ul></ul>
</div>
<div class="game_item">
<ul></ul>
</div>
</div>
<div style="text-align: center;">
<button id="btn" class="startBtn" bindtap="start">开始抽奖</button>
</div>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.game_wrap {
width: 240px;
height: 80px;
box-sizing: content-box;
border-radius: 15px;
border: 20px solid #F84438;
overflow: hidden;
margin: 10px auto;
box-shadow: 0px 0px 15px rgba(219, 71, 71, 0.5) inset
}
.game_item {
width: 33.333%;
height: 80px;
float: left;
border-left: 5px solid #F84438
}
.game_item:first-child {
border-left: none
}
.game_item li {
list-style: none;
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
position: relative;
font-size: 50px;
}
.startBtn{
background:#F84438;
border: none;
padding: 10px 20px;
color: #fff;
font-size: 16px;
cursor: pointer;
margin: 20px auto;
}
js
const LuckGame = (function(win,doc){
class Luck{
constructor(obj) {
this.setting = {
//奖品个数
len : 5,
//滚动时间
speed : 5000,
//循环几圈
circle : 5,
};
this.extend( this.setting, obj );
this.$ul = doc.querySelectorAll('.game_wrap ul');
this.$height = doc.querySelector('.game_item').offsetHeight;
this.setList();
}
setList(){
//填充li
let html = '';
for(let n = 0;n < this.setting.circle;n++){
for(let i = 0;i< this.setting.len;i++){
//图片这里自己添加img以及修改样式
html+='<li>'+i+'</li>';
};
};
;[].forEach.call(this.$ul,(o,i)=>{
o.innerHTML = html;
//设置默认随机显示
o.style['transform']=o.style['-webkit-transform'] = 'translate(0px, -'+Math.floor(Math.random() * this.setting.len) * this.$height+'px) translateZ(0px)';
});
}
start(arr,fn){
let that = this,countNum = 0;
//开始抽奖
;[].forEach.call(that.$ul,(o,i)=>{
setTimeout(()=>{
var y=(arr[i]+that.setting.len *(that.setting.circle-1))*that.$height;
o.style['-webkit-transition'] = that.setting.speed+'ms ease';
o.style['-webkit-transform'] = 'translate(0px, -'+y+'px) translateZ(0px)'
},i * 300);
o.addEventListener('webkitTransitionEnd',function(){
this.style['-webkit-transition'] = '0ms ease';
this.style['-webkit-transform'] = 'translate(0px, -'+arr[i]*that.$height+'px) translateZ(0px)';
countNum++;
if(countNum == that.$ul.length){
fn && fn();
}
},false);
})
}
extend (n,n1){
for(let i in n1){n[i] = n1[i]};
}
}
return Luck;
})(window,document);
var game = new LuckGame({
len : 4,
speed : 3000,
circle : 5,
});
btn.onclick = function(){
game.start([1,1,1],function(){
alert('恭喜你中奖了')
})
}
如果是小程序html 绑定事件修改bingtap,vue同理，改成@click=“start”
html
<button id="btn" class="startBtn" bindtap="start">开始抽奖</button>
js
})(window, document);下加
this.setData({
LuckGame
})
start: function () {
LuckGame = this.data.LuckGame;
var game = new LuckGame({
len: 9,
speed: 3000,
circle: 5,
});
game.start([1, 2, 3], function () {
alert('恭喜你中奖了')
})
},
提示game.start([中奖结果坐标])
当然你也可以封装成组件使用，直接小程序，vue专用的一些抽奖组件
进阶图片版
加入了中奖结果展示，中奖结果输入，三个值对应三个结果坐标
附上代码
我就直接放到一个html文件里里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>老虎机</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 80px;
height: 80px;
}
.view {
display: flex;
padding: 15px;
justify-content: space-between;
flex-wrap: wrap;
}
.imgbox {
flex: 0 0 30%;
margin: 5px;
position: relative;
}
.imgbox img {
width: 100%;
}
.view input {
width: 30%;
}
.sort {
position: absolute;
bottom: 15px;
right: 15px;
width: 25px;
height: 25px;
border: 2px solid #fff;
color: #fff;
border-radius: 50%;
text-align: center;
}
.game_wrap {
width: 240px;
height: 80px;
box-sizing: content-box;
border-radius: 15px;
border: 20px solid #F84438;
overflow: hidden;
margin: 10px auto;
box-shadow: 0px 0px 15px rgba(219, 71, 71, 0.5) inset
}
.game_item {
width: 33.333%;
height: 80px;
float: left;
border-left: 5px solid #F84438
}
.game_item:first-child {
border-left: none
}
.game_item li {
list-style: none;
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
position: relative;
font-size: 50px;
}
.startBtn {
background: #F84438;
border: none;
padding: 10px 20px;
color: #fff;
font-size: 16px;
cursor: pointer;
margin: 20px auto;
}
</style>
<body>
<div class="view" id="preview"></div>
<h3>输入中奖结果，012345,分别对应六个结果</h3>
<div class="view">
<input type="text" id="val1">
<input type="text" id="val2">
<input type="text" id="val3">
</div>
<div class="game_wrap">
<div class="game_item">
<ul>
</ul>
</div>
<div class="game_item">
<ul></ul>
</div>
<div class="game_item">
<ul></ul>
</div>
</div>
<div style="text-align: center;">
<button id="btn" class="startBtn" bindtap="start">开始抽奖</button>
</div>
<script>
var preview = document.getElementById("preview"),
html = '',
picList = [
'https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3429864182,372509089&fm=58',
'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4094726634,205531412&fm=58',
'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3602640829,2234550958&fm=58',
'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3935826912,4274413002&fm=58',
'https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1603838330,3438203983&fm=58',
'https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3292267028,843267015&fm=58'
],
val1 = document.getElementById("val1"),
val2 = document.getElementById("val2"),
val3 = document.getElementById("val3")
// 渲染奖品展示
for (let i = 0; i < this.picList.length; i++) {
preview.innerHTML += `<div class="imgbox"><img src="${picList[i]}">
<div class="sort">${i}</div></div>`
}
const LuckGame = (function (win, doc) {
class Luck {
constructor(obj) {
this.setting = {
len: 6, //奖品个数
speed: 5000, //滚动时间
circle: 5, //循环几圈
};
this.extend(this.setting, obj);
this.$ul = doc.querySelectorAll('.game_wrap ul');
this.$height = doc.querySelector('.game_item').offsetHeight;
this.setList();
}
setList() {
for (let n = 0; n < this.setting.circle; n++) {
for (let i = 0; i < this.setting.len; i++) {
//图片这里自己添加img以及修改样式
html += "<li>" + "<img src=" + picList[i] + ">" + "</li>";
};
};;
[].forEach.call(this.$ul, (o, i) => {
o.innerHTML = html;
//设置默认随机显示
o.style['transform'] = o.style['-webkit-transform'] = 'translate(0px, -' + Math.floor(Math
.random() * this.setting.len) * this.$height + 'px) translateZ(0px)';
});
}
start(arr, fn) {
let that = this,
countNum = 0;
//开始抽奖
;
[].forEach.call(that.$ul, (o, i) => {
setTimeout(() => {
var y = (arr[i] + that.setting.len * (that.setting.circle - 1)) * that.$height;
o.style['-webkit-transition'] = that.setting.speed + 'ms ease';
o.style['-webkit-transform'] = 'translate(0px, -' + y + 'px) translateZ(0px)'
}, i * 300);
o.addEventListener('webkitTransitionEnd', function () {
this.style['-webkit-transition'] = '0ms ease';
this.style['-webkit-transform'] = 'translate(0px, -' + arr[i] * that.$height +
'px) translateZ(0px)';
countNum++;
if (countNum == that.$ul.length) {
fn && fn();
}
}, false);
})
}
extend(n, n1) {
for (let i in n1) {
n[i] = n1[i]
};
}
}
return Luck;
})(window, document);
var game = new LuckGame({
len: 6,
speed: 3000,
circle: 5,
});
btn.onclick = function () {
game.start([+val1.value, +val2.value, +val3.value], function () {
alert('恭喜你中奖了')
})
}
</script>
</body>
</html>
补充常用的ui自带的抽奖组件
滚动数字 老虎机抽奖
里面的api特别全
转盘抽奖
还有刮刮卡
里的抽奖组件就更多了，去插件市场一搜，一大把
本人写过一片博客《十分钟写一个好玩的app》用的是uniapp,里面有用到转盘抽奖
总结：
不能控制结果的抽奖组件不是抽奖组件，觉得有用的点个赞啊，谢谢
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
