代码
<!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(",");
function getrandom(max) {
return parseInt(Math.random() * (max + 1), 10);
}
function clock() {
let random = uname[getrandom(uname.length - 1)];
nametxt.innerHTML = random;
};
let time;
let flag = true;
nametxt.onclick = function () {
if (flag == false) {
time = window.clearInterval(time);
music.pause();
flag = true;
} else {
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>
背景和音频自己添加吧