【刘建】前端面试题〓实现一个抽奖页面

写出一个抽奖页面

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

【刘建】前端面试题〓实现一个抽奖页面

写出一个抽奖页面

六子

引用和评论

【刘建】JavaScript数组去重方式

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具