我們平時(shí)在看一些選秀節(jié)目或一些歌唱類比賽節(jié)目時(shí)經(jīng)常會(huì)看到在現(xiàn)場(chǎng)的大屏幕上會(huì)有觀眾的手機(jī)號(hào)在滾動(dòng)來(lái)選出誰(shuí)是幸運(yùn)觀眾或誰(shuí)中了什么獎(jiǎng)項(xiàng)，這些手機(jī)號(hào)都是現(xiàn)場(chǎng)觀眾或場(chǎng)外觀眾在給選手投票時(shí)產(chǎn)生的，當(dāng)主持人一聲開(kāi)始令下，大屏幕上的手機(jī)號(hào)就會(huì)快速隨機(jī)滾動(dòng)，當(dāng)主持人一聲停令下，大屏幕上會(huì)隨機(jī)出現(xiàn)幾個(gè)停止?jié)L動(dòng)的手機(jī)號(hào)，這種手機(jī)號(hào)批量隨機(jī)滾動(dòng)的效果，就是我們今天要實(shí)現(xiàn)的效果。注意，在這個(gè)效果的實(shí)現(xiàn)當(dāng)中最核心的就是隨機(jī)和不重復(fù)。

下面，我就簡(jiǎn)單來(lái)介紹一下原理：
1、隨機(jī)，我們要寫(xiě)一個(gè)隨機(jī)數(shù)，而且這個(gè)隨機(jī)數(shù)不能重復(fù)，這個(gè)不能重復(fù)的隨機(jī)數(shù)說(shuō)白了就是我們從數(shù)據(jù)庫(kù)中取出的手機(jī)號(hào)的索引；
2、使用定時(shí)器不斷的產(chǎn)生不重復(fù)的隨機(jī)數(shù)，用這些不重復(fù)的隨機(jī)數(shù)去綁定手機(jī)號(hào)并將手機(jī)號(hào)追加在一個(gè)盒子中；
3、去除中獎(jiǎng)的手機(jī)號(hào)（這個(gè)前端貌似沒(méi)法實(shí)現(xiàn)，只能后臺(tái)去控制），當(dāng)開(kāi)始抽獎(jiǎng)時(shí)再次產(chǎn)生不重復(fù)的隨機(jī)數(shù)，再次用這些隨機(jī)數(shù)去綁定手機(jī)號(hào)，直到抽獎(jiǎng)結(jié)束。

正好我們公司最近年會(huì)上有這樣的現(xiàn)場(chǎng)抽獎(jiǎng)，于是我就做了一個(gè)這樣的抽獎(jiǎng)效果（我們的抽獎(jiǎng)號(hào)碼是用的我們每個(gè)人的邀請(qǐng)碼，不是手機(jī)號(hào)，其實(shí)原理都一樣。），而且可以控制每次中獎(jiǎng)的人數(shù)，配上后臺(tái)代碼和數(shù)據(jù)庫(kù)后效果還不錯(cuò)，接下來(lái)就把實(shí)現(xiàn)代碼分享出來(lái)吧。

PS:抽獎(jiǎng)代碼已經(jīng)經(jīng)過(guò)我們公司年會(huì)抽獎(jiǎng)環(huán)節(jié)的檢驗(yàn)，木得任何問(wèn)題！

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><title>互融CLUB</title><script type="text/javascript" src="js/jquery.min.js"></script><style>*{margin:0;padding:0;}img{display:block;}i{font-style:normal;}.vetically{justify-content:center;align-items:center;display:-webkit-flex;}.prize_con{position: absolute;width: 100%;height: 100%;background: url(images/firstp_bg.jpg) no-repeat left top / 100% 100%;overflow: hidden;}.prize_grade{font-size:98px;color: #ffe9af;text-align: center;margin: 160px auto 0;}.prize_list{width:55%;height:350px;mar