如何实现js手机号批量滚动抽奖

小编这次要给大家分享的是如何实现js手机号批量滚动抽奖,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

创新互联-专业网站定制、快速模板网站建设、高性价比泗水网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式泗水网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖泗水地区。费用合理售后完善,10多年实体公司更值得信赖。

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

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

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

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

分享出来吧。







互融CLUB




开始抽奖 0

  • 000000
  • 000000
  • 000000
  • 000000
  • 000000
  • 000000
  • 000000
  • 000000
  • 000000
  • 000000

  • 奖等
  • 人数
  • 金额

效果图如下:

如何实现js手机号批量滚动抽奖

看完这篇关于如何实现js手机号批量滚动抽奖的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。


当前名称:如何实现js手机号批量滚动抽奖
浏览路径:http://scyanting.com/article/jphggh.html