JS流程控制----分支判断、循环

caramel_code

已于 2023-10-08 00:21:46 修改

阅读量71

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-10-08 00:19:33 首次发布

本文链接：https://blog.csdn.net/2301_79941898/article/details/133661757

版权

-格式
-单if格式
一般用于单独的一个判断（一种情况）
if（条件判断）{
如果条件成立，就会执行这里的代码
}
游戏中有一个功能叫暂停，游戏中的人物或者物体在移动
只要控制移动的代码不运行，整个游戏就能暂停

-双人组合格式 if + else
一般用于两个分支的判断
if（条件判断）{
如果条件成立，就会执行这里的代码
   }else{
   否则（if不成立），就执行这里的代码
   }

-多人团体组合 if else if ....else if... else
一般用于三个及以上数量的判断情况
if（条件1）{
如果条件1成立，就会执行这里的代码
}else if（条件2）{
否则如果条件2成立，就会执行这里的代码
}else if（条件3）{
否则如果条件3成立，就会执行这里的代码
}else if（条件4）{
否则如果条件4成立，就会执行这里的代码
}else{
以上条件都不成立，执行这里
}

#登录升级3.0
-获取页面元素
-根据id获取页面元素
var e = document.getElementById("id名字")
var e =document.querySelector("#id名")
偷懒方式：如果id名符合js的命名规则，那么元素可以直接使用id名来操作

-获取文本框的值
元素.value = 新值

-页面跳转
window.location.href = "新的地址"

-生成随机数
Math.random() 随机一个0~1之间的任意小数
随机1~3之间的整数，需要取整parseInt()
Math.random()*3的范围永远到不了3，范围：0.0xxxx~2.9xxxx 取整之后的范围：0~2
Math.random()*10的范围永远到不了10，范围：0.0xxxx~9.9xxxx 取整之后的范围：0~9
Math.random()*10的范围永远到不了100，范围：0.0xxxx~99.9xxxx 取整之后的范围：0~99

-修改标签（除了input之外）的内容
元素.innerText = 新的值

-获取标签（除input之外）的内容
元素.innerText

#猜数字游戏
-规则：电脑随机一个1-100之间的整数
用户输入一个数字，与随机数字进行对比
js判断是太大、太小、正好

-页面构建
标题结果的div 输入框（数字）、猜一下的按钮、重新开始按钮

#猜数字源代码

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title> 猜数字页面</title>

<style>

h1{
text-align:center;
}

#result_div{
   width:200px;
   background-color:cyan;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   font-size:30px;
   }

#num_input{
   width:150px;
   height:30px;
   display:block;
   margin-left:auto;
   margin-right:auto;
   margin-top:10px;
   }

.btn{
   width:150px;
   height:30px;
   display:block;
   margin-left:auto;
   margin-right:auto;
   margin-top:10px;
   }

</style>
</head>
<body>
<h1>猜数字游戏</h1>
<div id="result_div">结果</div>
<input type="number" id="num_input" placeholder="请猜一个数字">
<input type="button" value="猜一下" class="btn" id="guess_btn" οnclick="guess()">
<input type="button" value="重新开始" class="btn" οnclick="again()">
</body>
<script>
var ran = parseInt(Math.random()*100)+1
   console.log("当前随机数"+ran)
function guess(){
   //获取文本框的内容
   var num = num_input.value
   //非空判断
if (num == ""){
   alert("请填写一个数字...")
   }else{
   //如果填了将内容转成数字
   num = parseInt(num)
   //将数字和随机数进行对比判断（3种情况）

   if(num == ran){
   result_div.innerText = "猜中了！"
   //设置猜一下的按钮不可点击
   guess_btn.disabled = true
   num_input.disabled = true
   }else if(num>ran){
   result_div.innerText="太大了.."
   }else{
   result_div.innerText = "太小了.."
   }
   //result_div.innerText = result
   }
   }

   function again(){
   //还原结果div
   result_div.innerText = "重新开始"
   //清空数字的文本框
   num_input.value = ""
   //重新随机一个整数
   ran = parseInt(Math.random()*100)+1
   console.log("当前随机数"+ran)
   //猜一下按钮设置可以用
   guess_btn.disable = false
   //文本框可以输入
   num_input.disabled =false
   guess_btn.disabled=false
   }
</script>
</html>

caramel_code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS流程控制----分支判断、循环

input type="button" value="猜一下" class="btn" id="guess_btn" onclick="guess()">-多人团体组合 if else if ....else if... else。
复制链接

扫一扫