需求 : 我们定义一串代码来实现每次打开页面让我们猜数字，猜的大了提示大了，反之亦然，猜对了刷新后再猜数字改变
第一步：框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
</script>
</body>
</html>
第二步：弹出输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var a = prompt('请输入猜的数字') * 1
</script>
</body>
</html>
记得做一个隐式转换哦
第三步：我们要每次的数字不一样首先要有一个数，并且会变化，所以这里就要用到了math。random() 随机数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function get() {
var num = Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
</script>
</body>
</html>
这里的话我们×10 +1的意思是这个随机数的范围就是1到11，但不包括11哦，即数学里的左闭右开，这里我们先打印一下num看一下是什么效果
大家会发现为什么这么多小数，这是因为random是浮点型的，所以我们要添加一个取整，并且是向下取整
第四步：取整
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var num = parseInt(Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
</script>
</body>
</html>
第五步：添加判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var num = parseInt(Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
while () {
}
</script>
</body>
</html>
这里我们用while循环来写，这里的条件是啥呢？？？如果说我们定义让输入的数不等于随机生成的就做出相应的提示，这样是不是就完成了一半
第六步：判断条件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var num = parseInt(Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
while (num != a) {
}
}
</script>
</body>
</html>
这里的话我们判断如果猜小了就提示，并让我们重新输
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var num = parseInt(Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
while (num != a) {
if (a < num) {
alert('猜的小了')
a = +prompt('请重新输入猜的数字')
}
}
</script>
</body>
</html>
接下来是大了的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function get() {
var num = parseInt(Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
while (num != a) {
if (a < num) {
alert('猜的小了')
a = +prompt('请重新输入猜的数字')
} else {
alert('猜的大了')
a = +prompt('请重新输入猜的数字')
}
}
</script>
</body>
</html>
** 第七步：既然大于小于都有了，那是不是要有等于的情况，即猜对了的情况**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function get() {
var num = parseInt(Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
while (num != a) {
if (a < num) {
alert('猜的小了')
a = +prompt('请重新输入猜的数字')
} else if(a > num){
alert('猜的大了')
a = +prompt('请重新输入猜的数字')
}
}
}
get()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function get() {
var num = parseInt(Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
while (num != a) {
if (a < num) {
alert('猜的小了')
a = +prompt('请重新输入猜的数字')
} else if(a > num){
alert('猜的大了')
a = +prompt('请重新输入猜的数字')
} if(a == num){
alert('猜对了')
// break;
}
}
}
get()
</script>
</body>
</html>
第八步：不是数字的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var num = parseInt(Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
while (num != a) {
if (a < num) {
alert('猜的小了')
a = +prompt('请重新输入猜的数字')
} else if(a > num){
alert('猜的大了')
a = +prompt('请重新输入猜的数字')
}else{
alert('请输入数字')
a = +prompt('请重新输入猜的数字')
}
if(a == num){
alert('猜对了')
// break;
}
}
}
</script>
</body>
</html>
最后：函数封装
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function get() {
var num = parseInt(Math.random() * 10 + 1)
var a = prompt('请输入猜的数字') * 1
while (num != a) {
if (a < num) {
alert('猜的小了')
a = +prompt('请重新输入猜的数字')
} else if(a > num){
alert('猜的大了')
a = +prompt('请重新输入猜的数字')
}else{
alert('请输入数字')
a = +prompt('请重新输入猜的数字')
}
if(a == num){
alert('猜对了')
// break;
}
}
}
get()
</script>
</body>
</html>
本文转载自: https://blog.csdn.net/tea_tea_/article/details/126412014
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。