HTML实现五子棋计时和记分的具体代码
时间: 2023-06-18 18:03:47 浏览: 56
以下是一个简单的 HTML 代码示例,展示如何实现五子棋计时和记分:
```html
<!DOCTYPE html>
<html>
<head>
<title>五子棋计时和记分</title>
<style>
#timer {
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
#score {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="timer">00:00</div>
<div id="score">黑方:0 分,白方:0 分</div>
<button id="start">开始</button>
<button id="stop">暂停</button>
<button id="reset">重置</button>
<script>
// 计时器
var time = 0;
var timer = null;
var timerDisplay = document.getElementById("timer");
function runTimer() {
time++;
var min = Math.floor(time / 60);
var sec = time % 60;
timerDisplay.innerHTML = (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec);
}
// 记分板
var scoreBlack = 0;
var scoreWhite = 0;
var scoreDisplay = document.getElementById("score");
function updateScore() {
scoreDisplay.innerHTML = "黑方:" + scoreBlack + " 分,白方:" + scoreWhite + " 分";
}
// 事件绑定
document.getElementById("start").addEventListener("click", function() {
timer = setInterval(runTimer, 1000);
});
document.getElementById("stop").addEventListener("click", function() {
clearInterval(timer);
timer = null;
});
document.getElementById("reset").addEventListener("click", function() {
clearInterval(timer);
timer = null;
time = 0;
scoreBlack = 0;
scoreWhite = 0;
timerDisplay.innerHTML = "00:00";
updateScore();
});
</script>
</body>
</html>
```
在这个示例中,我们使用了三个 HTML 元素来实现计时和记分:一个 `div` 元素用于显示时间,一个 `div` 元素用于显示记分,和三个 `button` 元素用于开始、暂停和重置计时器。
在 JavaScript 部分,我们定义了一个 `runTimer` 函数来更新计时器的显示,并且通过 `setInterval` 函数来定时调用这个函数。我们还定义了一个 `updateScore` 函数来更新记分板的显示。
最后,我们使用 `addEventListener` 函数来绑定按钮的点击事件,以便启动、暂停和重置计时器,以及更新记分。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)