console 命令行工具 X clear

console

let start_btn = document.querySelector(".start_btn");
let lis = document.querySelectorAll("li:not(.start_btn)");
let nowIndex = 0;
let lastIndex = 0;
let pathArr = [0, 1, 2, 4, 7, 6, 5, 3];
let tmpArr = [].concat(pathArr);
let target_index;
let allIndex=80;
let timer = 0;
// pathArr = pathArr.sort().sort(function(){
//   return Math.random() - 0.5;
// })

start_btn.addEventListener("click", function () {
  start_btn.style.pointerEvents='none';
  if (target_index != undefined) {
    lis[tmpArr[target_index]].innerText = "";
    tmpArr.splice(target_index, 1);
  }
  target_index=Math.floor(Math.random()*tmpArr.length);
  tmpArr.length==1 ? alert("无后续抽奖内容") : run(300);
});

function run(time) {
  setTimeout(function () {
    lis[pathArr[lastIndex]].classList.remove("active");
    lis[pathArr[nowIndex % 8]].classList.add("active");
    lastIndex = nowIndex % 8;
    if (nowIndex++ <= allIndex) {
      if(nowIndex>70){
        (time<300) && (time+=70);
      }else{
        (time>20) && (time-=70);
      }
      run(time);
    } else {
        if(lis[pathArr[(nowIndex-1) % 8]]==lis[tmpArr[target_index]]){
          nowIndex = 0;
          start_btn.style.pointerEvents='';
        }else{
            run(time);
        }
    }
  }, time);
}

<html>

<body>
	<ul>
	<li>奖品01</li>
	<li>奖品02</li>
	<li>奖品03</li>
	<li>奖品08</li>
	<li class="start_btn">开始抽奖</li>
	<li>奖品04</li>
	<li>奖品07</li>
	<li>奖品06</li>
	<li>奖品05</li>
    </ul>
</body>

</html>

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul{
    width: 540px;
    height: 540px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin:  auto;
    background-color: grey;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

ul li{
    width: 150px;
    height: 150px;
    background-color: white;
    border: 5px solid khaki;
    box-sizing: border-box;
    line-height: 150px;
    font-size: 24px;
    text-align: center;   
}

.start_btn{
    background-color:  blanchedalmond;
    color: red;
    font-size: 50px;
    line-height: 1.3em;
    cursor: pointer;
}

.active{
    background-color: yellow;
    border-color:orangered;
    transform: scale(1.1); 
}