代码
<!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.0">
<title>随机点名系统</title>
<link rel="shortcut icon" href="#"/>
</head>
<body>
<div>
<span id="name" onselectstart="return false" style="cursor:default">开始点名</span>
</div>
<audio id="music" preload hidden loop>
<source src="music.mp3"/>
</audio>
<script>
// 获取标签
let nametxt = document.getElementById('name');
let music = document.getElementById('music');
var nameString = String("李大大,崔大大,王大大,赵大大");
let uname = nameString.split(",");
// 创建一个函数生成0~max的随机数字
function getrandom(max) {
return parseInt(Math.random() * (max + 1), 10);
}
function clock() {
// 通过获取一个随机的数组下标实现随机获取一个名字,并将这个名字赋值给变量random
let random = uname[getrandom(uname.length - 1)];
//将random塞到span里
nametxt.innerHTML = random;
};
// 设置不停止时名字的刷新速度为30毫秒
let time;
// 将开始与停止按钮绑定到按钮上,并通过按钮控制
let flag = true;
nametxt.onclick = function () {
// 当flag标志为false时,点击按钮让刷新停止;
if (flag == false) {
time = window.clearInterval(time);
// 按钮文字从stop变为start;
// button.innerHTML = '开始';
music.pause();
// 标志变更
flag = true;
} else {
// 当flag标志为true时,开始刷新,文字变更
time = self.setInterval("clock()", 30);
// button.innerHTML = '停止';
if (music.paused) {
music.play()
}
flag = false;
}
}
// 监听回车事件
//监听回车(13是回车的代号)
// document.onkeyup = function (e) {
// var event = e || window.event;
// var key = event.which || event.keyCode || event.charCode;
// if (key === 13) {
// // button.click();
// if (flag == false) {
// time = window.clearInterval(time);
// music.pause();
// // 标志变更
// flag = true;
// } else {
// // 当flag标志为true时,开始刷新,文字变更
// time = self.setInterval("clock()", 30);
// if (music.paused){
// music.play()
// }
// flag = false;
// }
// }
// }
</script>
</body>
<style>
body {
padding: 0;
margin: 0;
background-image: url("bg.png");
background-size: 100%;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
span {
text-shadow: 0 0 10px #dfd8d8;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: ff 0.9s linear infinite;
}
@keyframes ff {
to {
filter: hue-rotate(360deg);}
}
span {
font-size: 187px;
}
</style>
</html>