写出一个抽奖页面
- 有200集体加入抽奖，每次抽出一个人，不能反复，必须每个人都要抽中奖
- 后面10次抽奖要选中固定的10集体，每次就从这10人中随机抽取一人，不能反复
- 从第11次开始就从残余的190人当中抽奖，不能反复，直到抽奖完结
- 曾经中过奖的人不能再次抽奖
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>多人抽奖页面</title> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, code, form, fieldset, legend, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } html { width: 100%; } body { width: 100%; } .draw-container { width: 705px; background: #00A0E9; margin: 50px auto 0; display: flex; box-sizing: border-box; padding-right: 5px; padding-bottom: 5px; align-items: center; overflow: hidden; flex-wrap: wrap; justify-content: space-between; } .draw-item { width: 30px; height: 30px; background: #5bb75b; margin-left: 5px; margin-top: 5px; display: flex; justify-content: center; align-items: center; } .btn-draw, .count-text{ width: 100px; height: 30px; display: flex; justify-content: center; align-items: center; margin: 20px auto 0; } .btn-draw { background: #0E0EFF; color: #fff; border-radius: 4px; box-shadow: 0 0 0 0 rgba(0,0,0,0.5); } .count-text { background: #00b3ee; } </style></head><body><div class="root"> <div class="draw-container"> </div> <div class="btn-draw">抽奖</div> <div class="count-text">次数0</div></div></body><script> function initPageEvent(func) { var oldOnload = window.onload if(typeof window.onload === 'function') { window.onload = function() { oldOnload() func() } } else { window.onload = function() { func() } } } // 创立范畴内随机数 function createRandom(minVal, maxVal) { return parseInt(Math.random() * (maxVal-minVal+1), 10) + minVal } // 创立固定数组 function createFixArr(arr = [], length, minVal, maxVal) { if(arr.length < length) { let num = createRandom(minVal, maxVal) if(!arr.includes(num)) arr.push(num) return createFixArr(arr, length, minVal, maxVal) } else { return arr } } function createUniqueNum(arr, offset, limit, arrLimit) { console.log(arrLimit) let n = true while(n) { let unique if(arrLimit !== undefined) { unique = arrLimit[createRandom(offset, limit)] } else { unique = createRandom(offset, limit) } if(!arr.includes(unique)) { n = false return unique } } } function changeDrawDiv(index) { // document.querySelectorAll('.draw-item')[luckIndex].style.background = 'red' // document.querySelector('.count-text').innerHTML = indexDraw } // 抽奖前置事件 let preLuckDraw = function() { let offset = 0 let limit = 199 let arrTen = [] let numFixed = 10 arrTen = createFixArr(arrTen, numFixed, offset, limit); var indexDraw = 0 var participantList = [] // return function() { // arrTen.map(item => { // // console.log(item + '中奖') // document.querySelectorAll('.draw-item')[item].style.background = 'red' // }) // let arrLeaving = arrTen; // let n = true // while(n) { // let luckIndex = createRandom(offset, limit) // if(!arrLeaving.includes(luckIndex)) { // arrLeaving.push(luckIndex) // // console.log(luckIndex+ '中奖') // document.querySelectorAll('.draw-item')[luckIndex].style.background = 'red' // } // if(arrLeaving.length >= limit+1) { // // console.log('长度' + arrLeaving.length) // n = false // } // } // } return function() { console.log(indexDraw) console.log(participantList) let luckIndex if(indexDraw<numFixed) { luckIndex = createUniqueNum(participantList, 0, 9, arrTen); } else if(indexDraw<200){ luckIndex = createUniqueNum(participantList, offset, limit); } if(indexDraw<200) { participantList.push(luckIndex) document.querySelectorAll('.draw-item')[luckIndex].style.background = 'red' indexDraw = indexDraw + 1 document.querySelector('.count-text').innerHTML = indexDraw } else { document.querySelector('.btn-draw').innerHTML = '抽奖曾经完结' } } } // 绘制div function createDiv() { for(var i=0; i<200; i++) { var divDrawItem = document.createElement('div') divDrawItem.className = 'draw-item' divDrawItem.innerText = i document.getElementsByClassName('draw-container')[0].appendChild(divDrawItem) } } // 加载页面事件 function initDrawEvent() { createDiv(); let luckDraw = preLuckDraw(); document.querySelector('.btn-draw').onclick = function () { luckDraw() } } initPageEvent(initDrawEvent)</script></html>