创建一个页面,添加js代码,要求: 显示当前时间 猜数游戏,计算机准备0-100之间的随机整数,用户来猜,统计用户猜数的次数
时间: 2024-09-27 15:14:50 浏览: 44
猜数游戏GuessNum.zip
创建一个包含JavaScript功能的网页,可以分为两个部分来实现:显示当前时间和猜数游戏。以下是简化的HTML结构和JavaScript代码示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>时间显示及猜数游戏</title>
<style>
#clock {
font-size: 24px;
}
</style>
</head>
<body>
<h1 id="clock"></h1>
<h2>猜数游戏</h2>
<p>请输入您的猜测(0-100):</p>
<input type="number" id="guessInput">
<button onclick="startGuessing()">开始猜测</button>
<div id="guessCount">已猜次数: 0</div>
<script>
// 显示当前时间
function showCurrentTime() {
const clockElement = document.getElementById("clock");
let now = new Date();
clockElement.textContent = `当前时间: ${now.toLocaleTimeString()} (${now.toLocaleDateString()})`;
}
// 猜数游戏逻辑
function startGuessing() {
const min = 0;
const max = 100;
let randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
let guessCount = document.getElementById("guessCount").innerText.split(": ")[1];
guessCount = parseInt(guessCount) || 0;
guessCount++;
document.getElementById("guessCount").innerText = "已猜次数: " + guessCount;
document.getElementById("guessInput").addEventListener("keyup", function (event) {
const userGuess = parseInt(event.target.value);
if (!isNaN(userGuess) && userGuess >= min && userGuess <= max) {
if (userGuess === randomNumber) {
alert("恭喜你,猜对了!尝试次数: " + guessCount);
} else {
alert(`你猜的是${userGuess},电脑想的是${randomNumber}。请再试一次。`);
}
} else {
alert("输入错误,请输入0到100之间的数字。");
}
});
}
// 初始化并显示当前时间
showCurrentTime();
</script>
</body>
</html>
```
阅读全文