SOURCE

let nameList = [];
let awardList = [];
let awardLevel = [];
let index = 0;
let currIndex = 0;
let timerHandle = null;
let settingShow = false;

function newLevel(count, level) {
  const levels = new Array(count + 1).join(',' + level).split(',');
  levels.shift();
  return levels;
}

function addName() {
  const names = document.getElementById('namelist');
  nameList = names.value
    .trim()
    .replace(/\n/g, ',')
    .replace(/[,，]+|，+/g, ',')
    .split(',');
  const one = parseInt(document.getElementById('one').value, 0);
  const two = parseInt(document.getElementById('two').value, 0);
  const three = parseInt(document.getElementById('three').value, 0);
  awardLevel = newLevel(three, '三等奖');
  awardLevel = awardLevel.concat(newLevel(two, '二等奖'));
  awardLevel = awardLevel.concat(newLevel(one, '一等奖'));
  document.getElementById('add').innerText = '总共：' + nameList.length + ' 人';
}

function rebaseIndex() {
  if (index >= nameList.length) {
    index = 0;
  }
}

function save() {
  const awardUl = document.getElementById('awardList');
  localStorage.setItem('annual-end', awardUl.innerText);
  const content = localStorage.getItem('annual-end');
  const data = new Blob([content], { type: 'text/plain;charset=UTF-8' });
  const downloadUrl = window.URL.createObjectURL(data);
  const anchor = document.createElement('a');
  anchor.href = downloadUrl;
  anchor.download = '获奖名单.txt';
  anchor.click();
  window.URL.revokeObjectURL(data);
}

function start() {
  if (timerHandle !== null) {
    clearInterval(timerHandle);
    timerHandle = null;
    awardList.push(nameList[currIndex]);
    const awardUl = document.getElementById('awardList');
    awardUl.innerHTML = awardList.map((item, index) => `<li>${awardLevel[index]}:${item.trim()}</li>`).join('');
    localStorage.setItem('annual-result', awardUl.innerText);
    nameList.splice(currIndex, 1);
    rebaseIndex();
  } else {
    const nameWrapper = document.getElementById('name');
    rebaseIndex();
    if (nameList.length > 0 && awardLevel.length > 0 && awardLevel.length > awardList.length) {
      timerHandle = setInterval(() => {
        currIndex = index++;
        nameWrapper.innerText = nameList[currIndex];
        rebaseIndex();
      }, 50);
    } else {
      nameWrapper.innerText = awardLevel.length >= awardList.length ? '没奖品了！' : '没有人了！';
    }
  }
}
function showMain() {
  const main = document.getElementById('main');
  if (main.classList.contains('hide')) {
    main.classList.remove('hide');
    settingShow = false;
  } else {
    main.classList.add('hide');
    settingShow = true;
  }
  document.getElementById('focus').focus();
}
document.onkeydown = function(event) {
  const e = event || window.event || arguments.callee.caller.arguments[0];
  if (e && e.keyCode === 27) {
    // 按Esc
    showMain();
  } else if (e && e.keyCode === 13) {
    // enter 键
    if (nameList.length === 0 && awardList.length === 0 && !settingShow) {
    } else if (!settingShow) {
      save();
    }
  } else if (e && e.keyCode === 32) {
    // space 键
    if (nameList.length === 0 && awardList.length === 0 && !settingShow) {
      showMain();
    } else if (!settingShow) {
      start();
    }
  }
};

<div class='app'>
  <div class='main' id='main'>
    <div id="name" class="name">准备好了吗</div>
  </div>
  <div class='setting'>
    <div>
      <input id='focus' style="position: absolute;visibility: hidden;"/>
      <div>
        <label for="one">一等奖</label>
        <input id='one' value='5' />
      </div>
       <div>
        <label for="two">二等奖</label>
        <input id='two' value='5' />
      </div>
       <div>
        <label for="three">三等奖</label>
        <input id='three' value='5' />
      </div>
      <div><label id='add'>总共：</label></div>
      <textarea id="namelist" class="namelist" rows="15" cols='27'></textarea>
      <button onClick="addName()">
        添加名字
      </button>
      
    </div>
    <div>
      <ul id="awardList" class="awardList"></ul>
      <button onClick="save()">
        保存结果
      </button>
    </div>
  </div>
</div>

.name {
  font-size: 120px;
}

body,
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
label, ul, li {
  color: white;
}

.app {
  overflow: hidden;
  height: 100vh;
  background-image: url(https://i.loli.net/2019/01/24/5c4977563ff68.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.main {
  height: 100vh;
  overflow: hidden;
  transition: height 1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.image {
    height: 50px;
    background-image: url(https://i.loli.net/2019/01/24/5c4954785a759.png);
    background-position-y: 0px;
    width: 280px;
}
.image.loading {
  background-position-y: -50px;
}
.image.ready {
  background-position-y: 50px;
}

.main.hide {
  height: 0vh;
}

.name {
  margin-bottom: 10px;
  color: white;
  font-family: 'heiti';
  font-weight: 700;
}

button {
  display: block;
  background: white;
  appearance: none;
  outline: none;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  width: 185px;
}
button:hover {
  background: #4fc3f7;
  border: 1px solid #4fc3f7;
}

.setting {
  display: flex;
  overflow-y: auto;
  height: 90vh;
}

.namelist {
  margin: 10px 0 5px;
}

.awardList {
  padding-left: 20px;
}