微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

js手机号批量滚动抽奖实现代码

我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始令下,大屏幕上的手机号就会快速随机滚动,当主持人一声停令下,大屏幕上会随机出现几个停止滚动的手机号,这种手机号批量随机滚动的效果,就是我们今天要实现的效果。注意,在这效果的实现当中最核心的就是随机和不重复。

下面,我就简单来介绍一下原理:

1、随机,我们要写一个随机数,而且这个随机数不能重复,这个不能重复的随机数说白了就是我们从数据库中取出的手机号的索引; 2、使用定时器不断的产生不重复的随机数,用这些不重复的随机数去绑定手机号并将手机号追加在一个盒子中; 3、去除中奖的手机号(这个前端貌似没法实现,只能后台去控制),当开始抽奖时再次产生不重复的随机数,再次用这些随机数去绑定手机号,直到抽奖结束。

正好我们公司最近年会上有这样的现场抽奖,于是我就做了一个这样的抽奖效果(我们的抽奖号码是用的我们每个人的邀请码,不是手机号,其实原理都一样。),而且可以控制每次中奖的人数,配上后台代码数据库效果还不错,接下来就把实现代码

分享出来吧。

rush:xhtml;"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="renderer" content="webkit"> 互融CLUB

效果图如下:

以下附上源代码代码实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐