HTML随机点名系统、抽奖系统、JS、随机点名代码

这是一个使用HTML和JavaScript实现的随机点名和抽奖系统。界面简洁，点击开始按钮后名字滚动，点击停止即显示中奖者。点名过程确保随机且不重复，除非页面刷新。

先看看界面吧，简简单单。

再说说功能吧，点击“开始点名”就开始滚动了，点击“停止”，中间显示的就是抽中的“幸运观众了”。完全随机，只要不刷新界面，抽一个少一个，绝不重复。

接着就上代码吧

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>抽签</title>
</head>
<body style="background-color: #B0E0E6;">
    <div id="app">
        <h4>随机点名</h4>
    </div>
    <div style="margin: 0 auto;">
        <button onclick="start()" style="height: 80px;margin-left: 40%;width: 20%;font-size: 26px;cursor: pointer;box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top,#90dfa2,#84d494);
background: -moz-linear-gradient(top,#90dfa2,#84d494);
background: linear-gradient(top,#90dfa2,#84d494);">开始点名</button>
    </div>
    <div id = "name" style="height: 150px;width: 40%;line-height: 150px;border: 2px solid #F00;background-color: #CEFFCE;margin-top: 4%;
    margin-left: 30%;text-align: center;font-size: 10000;vertical-align:middle;"></div>
    <div style="margin: 0 auto;">
        <button onclick="stop()" style="height: 80px;margin-top: 3%;margin-left: 40%;width: 20%;font-size: 26px;cursor: pointer;box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top,#FFC0CB,#FFC0CB);
background: -moz-linear-gradient(top,#FFC0CB,#FFC0CB);
background: linear-gradient(top,#FFC0CB,#FFC0CB);">停止</button>
    </div>
</div>  
<script>
// 根据屏幕大小自适应字体
    function fontSize(){
        var deviceWidth=document.documentElement.clientWidth>768?1300:document.documentElement.clientWidth;
        document.documentElement.style.fontSize=(deviceWidth/25)+"px";
    }
    fontSize();
    window.onresize=fontSize;
// 这个就是滚动的项目了，按照自己的需求修改
var a = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19'                
];
var timer = null;
var result = document.getElementById("name");
function start () {
    // 防止点击两次开始
    if (timer !== null) {
        return
    }
    // 开始滚动啦 40ms一次，速度自己调啊
    timer = setInterval(function () {
        for (let i = 0; i < a.length; i++) {
            result.innerHTML = a[Math.floor(Math.random() * a.length)]
        } 
    }, 40)  
}

function stop () {
    // 停止滚动
    clearInterval(timer)
    timer = null
    // 删除选中的，保证不重复
    a.splice(a.findIndex(e => e === result.innerHTML), 1);
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
</html>