<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
text-align: center;
display: flex;
flex-direction: column;
gap: 2rem;
font-family: sans-serif;
}
button {
font-size: 1.5rem;
border-radius: 0.5rem;
padding: 0.25rem 1rem;
cursor: pointer;
}
#score {
font-size: 1.5rem;
color: green;
}
</style>
<title>jQuery 计时游戏</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>简易掐秒表 目标 2.00 s</h1>
<div><button id="btn">点击开始</button></div>
<div id="result">/</div>
<div id="score">总分: 0 | 轮数: 0 | 平均分: 0</div>
<script>
$(function() {
let startTime = 0, endTime = 0, totalScore = 0, round = 0;
// 使用 jQuery 事件绑定
$("#btn").on("click", function() {
if (!startTime) {
startTime = Date.now();
$(this).text("点击结束");
} else {
endTime = Date.now();
$(this).text("点击开始");
const diff = (endTime - startTime) / 1000;
const error = Math.abs(diff - 2);
const score = Math.round(10 / (error + 0.01));
totalScore += score;
round++;
// 使用链式操作更新界面
$("#result")
.text(`时间差: ${diff.toFixed(3)}s | 误差: ${error.toFixed(3)}s | 分数: ${Math.round(score)}`);
$("#score")
.text(`总分: ${Math.round(totalScore)} | 轮数: ${round} | 平均分: ${Math.round(totalScore / round)}`);
startTime = 0;
}
});
});
</script>
</body>
</html>
index.html