帮我用HTML 写一个舒尔特表格的小游戏要求一共二十五个数不重复,每个数字位置随机,并且有计时器记录我的完成时间
时间: 2023-05-18 21:03:01 浏览: 170
好的,我可以帮你写一个舒尔特表格的小游戏。以下是 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>舒尔特表格小游戏</title>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
}
td {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
font-size: 24px;
cursor: pointer;
}
td.clicked {
background-color: gray;
color: white;
}
</style>
</head>
<body>
<h1>舒尔特表格小游戏</h1>
<p>请在表格中找到数字 1 到 25,按照顺序点击。</p>
<table>
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
<td id="4"></td>
<td id="5"></td>
</tr>
<tr>
<td id="6"></td>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
<td id="10"></td>
</tr>
<tr>
<td id="11"></td>
<td id="12"></td>
<td id="13"></td>
<td id="14"></td>
<td id="15"></td>
</tr>
<tr>
<td id="16"></td>
<td id="17"></td>
<td id="18"></td>
<td id="19"></td>
<td id="20"></td>
</tr>
<tr>
<td id="21"></td>
<td id="22"></td>
<td id="23"></td>
<td id="24"></td>
<td id="25"></td>
</tr>
</table>
<p>用时:<span id="timer">0</span> 秒</p>
<script>
var nums = [];
for (var i = 1; i <= 25; i++) {
nums.push(i);
}
nums.sort(function() {
return Math.random() - 0.5;
});
for (var i = 1; i <= 25; i++) {
document.getElementById(i.toString()).innerHTML = nums[i-1].toString();
}
var startTime = new Date().getTime();
var timer = setInterval(function() {
var currentTime = new Date().getTime();
var elapsedTime = Math.floor((currentTime - startTime) / 1000);
document.getElementById("timer").innerHTML = elapsedTime.toString();
}, 1000);
var clickedCount = 0;
var clickedNum = 1;
var tdList = document.getElementsByTagName("td");
for (var i = 0; i < tdList.length; i++) {
tdList[i].addEventListener("click", function() {
if (this.innerHTML == clickedNum.toString()) {
this.classList.add("clicked");
clickedCount++;
clickedNum++;
if (clickedCount == 25) {
clearInterval(timer);
alert("恭喜你完成了游戏,用时 " + document.getElementById("timer").innerHTML + " 秒!");
}
}
});
}
</script>
</body>
</html>
```
这个小游戏一共有 25 个格子,每个格子里面放一个数字,数字的位置是随机的,数字也是不重复的。你需要按照数字的顺序依次点击格子,直到把所有数字都点完为止。在游戏开始时,会有一个计时器记录你的完成时间。
阅读全文