编写html抽签代码从ABCD四个字母中抽出三个点击开始按钮不断显示抽签结果点击完成按钮停止抽签并显示最终结果。
<!DOCTYPE html>
<html>
<head>
<title>抽签</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 20px;
}
#result {
font-size: 48px;
margin-top: 50px;
margin-bottom: 50px;
}
button {
font-size: 24px;
padding: 10px 20px;
margin-top: 20px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #27ae60;
}
</style>
</head>
<body>
<h1>抽签</h1>
<div id="result"></div>
<button id="startBtn">开始</button>
<button id="stopBtn">完成</button>
<script type="text/javascript">
var letters = ['A', 'B', 'C', 'D']; // 可选字母数组
var result = document.getElementById('result');
var startBtn = document.getElementById('startBtn');
var stopBtn = document.getElementById('stopBtn');
var intervalId; // setInterval返回的id
<pre><code> // 点击开始按钮，每隔1秒抽出3个字母并显示
startBtn.onclick = function() {
intervalId = setInterval(function() {
var arr = [];
while (arr.length < 3) {
var randomIndex = Math.floor(Math.random() * letters.length);
var letter = letters[randomIndex];
if (arr.indexOf(letter) === -1) {
arr.push(letter);
}
}
result.innerText = arr.join(' ');
}, 1000);
};
// 点击完成按钮，停止抽签并显示最终结果
stopBtn.onclick = function() {
clearInterval(intervalId);
var arr = [];
while (arr.length < 3) {
var randomIndex = Math.floor(Math.random() * letters.length);
var letter = letters[randomIndex];
if (arr.indexOf(letter) === -1) {
arr.push(letter);
}
}
result.innerText = '最终结果：' + arr.join(' ');
};
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/e9AW 著作权归作者所有。请勿转载和采集!