需求分析
生成随机整数 点击按钮 获取输入框中的值来和随机整数比较 生成关于比较结果的提示 猜出之后重新开始游戏
游戏界面
创建一个div类名为area表示游戏区域 把一下标签包裹
标题 h1标签 输入框input标签类型是text文本框类型
按钮 button标签 提示 p标签 类名为tips
标签之间的嵌套关系如下
游戏初始界面如下
游戏界面的代码如下
<div class="area">
<h1>数字猜猜乐</h1>
<input type="text">
<button>判断</button>
<p class="tips"></p>
</div>
功能实现
生成1-10随机整数
Math.random是生成随机数的方法 Math.floor向下取整
//生成随机数 (1-10)
let r = Math.floor(Math.random() * 10) + 1
点击按钮判断
- 获取输入框 提示部分 和按钮元素
//获取元素
const input = document.querySelector('input')
const tips = document.querySelector('.tips')
const button = document.querySelector('button')
-
给按钮增加点击事件 点击之后再开始判断
-
声明变量a表示输入框中的值 注意这里是string类型
-
a>r和a< r 的情况下不同的提示语句用innerText添加
-
最后当a没有大于也没有小于r的情况下就是a=r猜对了的情况 提示语句用正则表达式来输出 猜对的情况下可以重新生成随机数然后再进行下一轮的猜词游戏了
以下是点击按钮事件的代码
//按钮点击事件猜词
button.addEventListener('click', () => {
let a = input.value
if (a > r) {
tips.innerText = `猜大了`
}
else if (a < r) {
tips.innerText = `猜小了`
}
//如果猜对了自动开始下一轮
else {
tips.innerText = `猜对了就是${a}`
r = Math.floor(Math.random() * 10)
}
})
最终代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字猜猜乐</title>
</head>
<body>
<div class="area">
<h1>数字猜猜乐</h1>
<input type="text">
<button>判断</button>
<p class="tips"></p>
</div>
<style></style>
<script>
//获取元素
const input = document.querySelector('input')
const tips = document.querySelector('.tips')
const button = document.querySelector('button')
//生成随机数 (1-10)
let r = Math.floor(Math.random() * 10)
console.log(r);
//按钮点击事件猜词
button.addEventListener('click', () => {
let a = input.value
if (a > r) {
tips.innerText = `猜大了`
}
else if (a < r) {
tips.innerText = `猜小了`
}
//如果猜对了自动开始下一轮
else {
tips.innerText = `猜对了就是${a}`
r = Math.floor(Math.random() * 10)
}
})
</script>
</body>
</html>
