0
0

javascript随机猜数字，每次结果不一样

需求 : 我们定义一串代码来实现每次打开页面让我们猜数字，猜的大了提示大了，反之亦然，猜对了刷新后再猜数字改变

第一步：框架

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.         
  10.         </script>
  11.     </body>
  12. </html>

第二步：弹出输入框

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  10.                 var a = prompt('请输入猜的数字') * 1
  12.         </script>
  13.     </body>
  14. </html>

记得做一个隐式转换哦

第三步：我们要每次的数字不一样首先要有一个数，并且会变化，所以这里就要用到了math。random() 随机数

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             function get() {
  10.                 var num = Math.random() * 10 + 1)
  11.                 var a = prompt('请输入猜的数字') * 1
  12.                 
  13.         </script>
  14.     </body>
  15. </html>

这里的话我们×10 +1的意思是这个随机数的范围就是1到11，但不包括11哦，即数学里的左闭右开，这里我们先打印一下num看一下是什么效果

大家会发现为什么这么多小数，这是因为random是浮点型的，所以我们要添加一个取整，并且是向下取整

第四步：取整

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.                 var num = parseInt(Math.random() * 10 + 1)
  10.                 var a = prompt('请输入猜的数字') * 1                
  11.         </script>
  12.     </body>
  13. </html>

第五步：添加判断

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.         
  10.                 var num = parseInt(Math.random() * 10 + 1)
  11.                 var a = prompt('请输入猜的数字') * 1
  12.                 while () {
  13.                 
  14.             }
  15.         
  16.         </script>
  17.     </body>
  18. </html>

这里我们用while循环来写，这里的条件是啥呢？？？如果说我们定义让输入的数不等于随机生成的就做出相应的提示，这样是不是就完成了一半

第六步：判断条件

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             
  10.                 var num = parseInt(Math.random() * 10 + 1)
  11.                 var a = prompt('请输入猜的数字') * 1
  12.                 while (num != a) {
  13.                     
  14.                 }
  15.                 
  16.             }
  17.         
  18.         </script>
  19.     </body>
  20. </html>

这里的话我们判断如果猜小了就提示，并让我们重新输

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             
  10.                 var num = parseInt(Math.random() * 10 + 1)
  11.                 var a = prompt('请输入猜的数字') * 1
  12.                 while (num != a) {
  13.                     if (a < num) {
  14.                         alert('猜的小了')
  15.                         a = +prompt('请重新输入猜的数字')
  16.                     }
  17.                 }
  18.         
  19.         </script>
  20.     </body>
  21. </html>

接下来是大了的情况

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             function get() {
  10.                 var num = parseInt(Math.random() * 10 + 1)
  11.                 var a = prompt('请输入猜的数字') * 1
  12.                 while (num != a) {
  13.                     if (a < num) {
  14.                         alert('猜的小了')
  15.                         a = +prompt('请重新输入猜的数字')
  16.                     } else {
  17.                         alert('猜的大了')
  18.                         a = +prompt('请重新输入猜的数字')
  19.                     }
  20.                 }
  21.             
  22.             
  23.         
  24.         </script>
  25.     </body>
  26. </html>

** 第七步：既然大于小于都有了，那是不是要有等于的情况，即猜对了的情况**

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             function get() {
  10.                 var num = parseInt(Math.random() * 10 + 1)
  11.                 var a = prompt('请输入猜的数字') * 1
  12.                 while (num != a) {
  13.                     if (a < num) {
  14.                         alert('猜的小了')
  15.                         a = +prompt('请重新输入猜的数字')
  16.                     } else if(a > num){
  17.                         alert('猜的大了')
  18.                         a = +prompt('请重新输入猜的数字')
  19.                     }
  20.                     
  21.                 }                
  22.             }
  23.             get()
  24.         </script>
  25.     </body>
  26. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             function get() {
  10.                 var num = parseInt(Math.random() * 10 + 1)
  11.                 var a = prompt('请输入猜的数字') * 1
  12.                 while (num != a) {
  13.                     if (a < num) {
  14.                         alert('猜的小了')
  15.                         a = +prompt('请重新输入猜的数字')
  16.                     } else if(a > num){
  17.                         alert('猜的大了')
  18.                         a = +prompt('请重新输入猜的数字')
  19.                     }                    if(a == num){
  20.                         alert('猜对了')
  21.                         // break;
  22.                     }
  23.                 }                
  24.             }
  25.             get()
  26.         </script>
  27.     </body>
  28. </html>

第八步：不是数字的情况

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  10.                 var num = parseInt(Math.random() * 10 + 1)
  11.                 var a = prompt('请输入猜的数字') * 1
  12.                 while (num != a) {
  13.                     if (a < num) {
  14.                         alert('猜的小了')
  15.                         a = +prompt('请重新输入猜的数字')
  16.                     } else if(a > num){
  17.                         alert('猜的大了')
  18.                         a = +prompt('请重新输入猜的数字')
  19.                     }else{
  20.                         alert('请输入数字')
  21.                         a = +prompt('请重新输入猜的数字')
  22.                     }
  23.                     
  24.                     if(a == num){
  25.                         alert('猜对了')
  26.                         // break;
  27.                     }
  28.                 }                
  29.             }
  30.         
  31.         </script>
  32.     </body>
  33. </html>

最后：函数封装

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             function get() {
  10.                 var num = parseInt(Math.random() * 10 + 1)
  11.                 var a = prompt('请输入猜的数字') * 1
  12.                 while (num != a) {
  13.                     if (a < num) {
  14.                         alert('猜的小了')
  15.                         a = +prompt('请重新输入猜的数字')
  16.                     } else if(a > num){
  17.                         alert('猜的大了')
  18.                         a = +prompt('请重新输入猜的数字')
  19.                     }else{
  20.                         alert('请输入数字')
  21.                         a = +prompt('请重新输入猜的数字')
  22.                     }
  23.                     
  24.                     if(a == num){
  25.                         alert('猜对了')
  26.                         // break;
  27.                     }
  28.                 }                
  29.             }
  30.             get()
  31.         </script>
  32.     </body>
  33. </html>
标签： javascript 前端 开发语言
本文转载自: https://blog.csdn.net/tea_tea_/article/details/126412014
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。
登录后发布评论

“javascript随机猜数字，每次结果不一样”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？