关于前端:刘建前端面试题〓实现一个抽奖页面

5次阅读

共计 4027 个字符，预计需要花费 11 分钟才能阅读完成。

有 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>

正文完