html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>?????</title>
<link rel="stylesheet" href="random.css">
</head>
<body>
<div id="call">
<button id="btn1">????</button>
<button id="btn2">????</button>
<p class="info">???????</p>
<div class="screen">
<span class="name"></span>
</div>
<ul id="nameList"></ul>
</div>
<script src="name.js"></script>
</body>
</html>
css
/* ???????? */
* {
margin: 0;
padding: 0;
}
body {
background-color: #fcfaed;
font-family: Arial, sans-serif;
}
/* ????????? */
#call {
width: 600px;
border: 3px solid #CC9966;
text-align: center;
margin: 20px auto;
}
/* ??????? */
#btn1, #btn2 {
width: 110px;
height: 50px;
font-size: 17px;
border: none;
border-radius: 10px;
margin: 10px 50px 0;
color: #990000;
background-color: #FFCC99;
cursor: pointer;
}
#btn1:hover, #btn2:hover {
background-color: #FF9966;
}
/* ?????? */
.info {
font-size: 20px;
font-weight: bold;
margin: 10px 0;
color: #339900;
}
/* ????? */
.screen {
position: relative;
width: 150px;
height: 100px;
border: 2px solid #CCCC66;
border-radius: 10px;
margin: 12px auto;
}
/* ????????? */
.name {
position: absolute;
font-size: 35px;
left: 40px;
top: 25px;
}
/* ul???? */
#nameList {
list-style-type: none;
padding: 0;
}
/* li???? */
#nameList li {
width: 75px;
height: 40px;
line-height: 40px;
display: inline-block;
text-align: center;
font-size: 18px;
border: 3px dashed #CC6666;
border-radius: 35%;
margin: 5px;
cursor: pointer;
}
#nameList li:hover {
background-color: #FFCC99;
}
/* ???li?? */
#nameList li.selected {
background-color: #CCCCFF;
color: #003399;
font-weight: bold;
}
js
// ??????
const callBox = document.getElementById("call");
const startBtn = document.getElementById("btn1");
const stopBtn = document.getElementById("btn2");
const infoParagraph = document.querySelector(".info");
const nameScreen = document.querySelector(".name");
const nameList = document.getElementById("nameList");
// ??????
const arr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10",
"11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
"21", "22"];
// ????? <li> ??
arr.forEach((item) => {
const li = document.createElement("li");
li.textContent = item;
nameList.appendChild(li);
});
// ??????
let timer = null;
// ????
startBtn.addEventListener("click", () => {
// ????????????????
if (timer) {
clearInterval(timer);
}
// ????li???
const listItems = nameList.querySelectorAll("li");
listItems.forEach(li => li.classList.remove("selected"));
// ?????????
timer = setInterval(() => {
const randomIndex = Math.floor(Math.random() * arr.length);
listItems.forEach(li => li.classList.remove("selected"));
listItems[randomIndex].classList.add("selected");
}, 100); // ?100??????
});
// ????
stopBtn.addEventListener("click", () => {
// ?????
clearInterval(timer);
// ?????li??
const selectedItem = nameList.querySelector("li.selected");
if (selectedItem) {
// ?????????
const selectedName = selectedItem.textContent;
// ???????????
nameScreen.textContent = selectedName;
// ??????
infoParagraph.textContent = `????:${selectedName}`;
} else {
// ??????????
infoParagraph.textContent = "????????";
}
});
