用html实现猜数字游戏,如果输入错误,比如输入大于100或小于1就给出错误输入提示。
时间: 2024-06-15 14:06:27 浏览: 15
要用HTML实现猜数字游戏,你可以结合JavaScript来实现交互功能。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>猜数字游戏</title>
<script>
function guessNumber() {
var randomNumber = Math.floor(Math.random() * 100) + 1; // 生成1到100之间的随机数
var guess = parseInt(document.getElementById("guess").value); // 获取用户输入的猜测值
if (guess < 1 || guess > 100) {
document.getElementById("result").innerHTML = "错误输入!请输入1到100之间的数字。";
} else if (guess === randomNumber) {
document.getElementById("result").innerHTML = "恭喜你,猜对了!";
} else if (guess < randomNumber) {
document.getElementById("result").innerHTML = "猜小了,请再试一次。";
} else {
document.getElementById("result").innerHTML = "猜大了,请再试一次。";
}
}
</script>
</head>
<body>
<h1>猜数字游戏</h1>
<p>请输入1到100之间的数字:</p>
<input type="number" id="guess">
<button onclick="guessNumber()">猜一下</button>
<p id="result"></p>
</body>
</html>
```
在这个示例中,我们使用了`Math.random()`函数生成一个1到100之间的随机数作为答案。用户通过输入框输入猜测的数字,并点击按钮进行猜测。根据用户的猜测结果,通过JavaScript判断并在页面上显示相应的提示信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)