老虎机数字抽奖（可控制结果）

废话

本篇是一个原生js构造函数，加css3实现的抽奖，在app,h5,小程序，小游戏里都可以直接用，都兼容，先看下是不是你们想要的效果吧，h5，app，小程序里（当然也能自定义图片，不用数字）

普通js,html里

说一下，常用的几种抽奖（转盘，老虎机等），在微信小程序，小游戏，app里，现在到处可见，所以抽奖这个东西，不要抱有幻想中大奖，程序是人写的，我让你中啥你就中啥，

正文

jsbin工具

附上代码
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++){
	        		html+='<li>'+i+'</li>'; //图片这里自己添加img以及修改样式
	        	};
        	};
        	;[].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('恭喜你中奖了')
		})
	},
	

当然你也可以封装成组件使用，还有小程序，vue专用的一些抽奖组件

补充常用的ui自带的抽奖组件

京东的nutUI

滚动数字 老虎机抽奖

里面的api特别全

转盘抽奖

还有刮刮卡

uniapp

里的抽奖组件就更多了，去插件市场一搜，一大把

本人写过一片博客《十分钟写一个好玩的app》用的是uniapp,里面有用到转盘抽奖

总结：

不能控制结果的抽奖组件不是抽奖组件，觉得有用的点个赞啊，谢谢

标签：style,抽奖,数字,height,game,setting,0px,老虎机
来源： https://blog.csdn.net/weixin_44314258/article/details/117066661