年会抽奖效果

作者: AcessCors | 来源:发表于2019-09-25 10:39 被阅读0次

年会抽奖效果
年会抽奖
年会抽奖
年会抽奖
Express + Three.js 抽奖程序
iOS 抽奖轮盘效果实现思路
抽奖程序-kenxiong / lottery
你想要的抽奖开源项目都在这里
抽奖和AA收款,2个年会聚餐必备微信群小程序
抽奖

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>随机</title>
  <!-- 在375px设备下1rem = 10px -->
  <style>
    html, body {
      font-size: 0.26vw;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .app {
      font-size: 20px;
      height: 4rem;
      text-align:center;
      color: #ff0000;
      width: 20rem;
      font-weight: 800;
    }
    .root {
      color: #fff;
      background-color: #1890FF;
      border-color: #1890FF;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
      line-height: 1.6;
      padding: 4px 15px;
      position: relative;
      display: inline-block;
      font-weight: 400;
      white-space: nowrap;
      text-align: center;
      background-image: none;
      border: 1px solid transparent;
      font-size: 14px;
      border-radius: 4px;
    }
    .root:active {
      outline: 0;
      color: #fff;
      background-color: #096dd9;
      border-color: #096dd9;
    }
    .root:focus {
      outline: 0;
      color: #fff;
      background-color: #40a9ff;
      border-color: #40a9ff;
    }
  </style>
</head>

<body>
  <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center">
    <div>
    <div class="app" id="app"></div>
    <div style="text-align:center"><button class="root" id="root" onClick="random(1000)">开始</button></div>
    </div>
  </div>
  <script>
    document.getElementById('root').innerHTML = "开始";
    let count = false;
    let interVal = null;
    function random(num){
      count = !count;
      if (count) {
        interVal = setInterval(function(){ romdomArray(num) }, 100);
        document.getElementById('root').innerHTML = "暂停";
      } else {
        document.getElementById('root').innerHTML = "开始";
        clearInterval(interVal)
      }
    }
    function romdomArray(num){
      let array = [];
      for (let i = 0; array.length < 5; i+=1) {
        if (i===0) {
          let rondomNumber = Math.round(Math.random()* num);
          if (rondomNumber !== 0) {
            array.push(Math.round(Math.random()* num));
          } 
        } else {
          let rondomNumber = Math.round(Math.random()* num);
          if (array.indexOf(rondomNumber) === -1 && rondomNumber !== 0) {
            array.push(rondomNumber);
          }
        }
      }
      document.getElementById('app').innerHTML = array.join(' ');
    }
  </script>
</body>
</html>