条件语句及其应用小案例（石头剪刀布）

本文链接：https://blog.csdn.net/Pursuit53/article/details/104956570

条件运算符（三目运算符）

所谓的三元 / 三目运算符，指得是有三个表达式来参与程序的执行

有一个表达式参与程序的执行,称为一元 / 一目运算符
有二个表达式参与程序的执行,称为二元 / 二目运算符，大部分运算符都是
二元运算符
有三个表达式参与程序的执行,称为三元 / 三目运算符

表达式1 ? 表达式2 : 表达式3
通过表达式1 的执行结果的布尔值来进行判断

如果表达式1 执行结果是 true 执行表达式2
如果表达式1 执行结果是 false 执行表达式3

运算符优先级

在这里插入图片描述

条件语句

条件会自动隐式转换成布尔值
三目运算符不能判断一次，解决多个问题，但是 if 语句可以

if( 表达式 ){
执行程序
}
当表达式的结果为true,执行程序；当表达式的结果为false,没有执行程序
if(表达式){
程序1
}
else{
程序2
}
当表达式结果为 true , 执行程序1；当表达式结果为 false, 执行程序2
if(条件1){
程序1
}
else if(条件2){
程序2
}
else if(条件3){
程序3
}
…
当满足条件1,执行程序1；当满足条件2,执行程序2…；满足哪个条件就执行哪个条件的程序
判断的顺序是从上至下,如果满足了第一个条件,之后的条件都不会再判断和执行，最终只会执行一个程序
如果所有的条件都不满足,是没有执行内容的
if(条件1){
程序1
}
else if(条件2){
程序2
}
else if(条件3){
程序3
}
…
else {
}
从第一个条件开始判断,满足那么个条件就执行对应的程序
满足当前条件之后,执行对应的当前程序,之后的else if(),else 不会执行
如果所有的条件都不满足,会执行 else 中的程序

当一个条件不能包含所有需求时，可以用 || 增加条件范围
当一个条件包含内容超出需求时，可以用 && 缩减条件范围

条件语句的小案例（石头剪刀布）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石头剪刀布</title>
    <style>
        #box{
            width: 500px;
            overflow: hidden;
            margin: 0 auto;
        }
        #box div{
            width: 180px;
            height: 287px;
            border:1px solid #000 ;
            background-image: url(./img/game1.png);
            float: left;
            margin-right: 30px;
        }
        #result{
            font-size: 30px;
            text-align: center;
        }
        #col{
            width: 500px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="left">我方</div>
        <div id="right">对手</div>
    </div>
    <div id="col">
        <button id="bn0">剪刀</button>
        <button id="bn1">石头</button>
        <button id="bn2">布</button>
    </div>
    <p id="result"></p>
    <script>
        //获取元素的值
        var bn0=document.getElementById("bn0");
        var bn1=document.getElementById("bn1");
        var bn2=document.getElementById("bn2");
        var left=document.getElementById("left");
        var right=document.getElementById("right");
        var result=document.getElementById("result");
    

        //当我方点击“剪刀”按钮时
        bn0.οnclick=function(){
            //我方出“剪刀”，此时背景图的位置不动
            left.style.backgroundPositionX="0px";
            //生成随机数，括号后面的值代表是0-值（不包括这个值），由于我们需要三个值0,1,2，所以这个数为3
            var n=Math.random()*3;
            //生成的随机数默认是字符型的，要转换为数字型的
            n=parseInt(n);
            //当随机数为0时，让对手的背景图为“剪刀”，即背景图位置不变并显示结果为平局
            if(n===0){
                right.style.backgroundPositionX="0px";
                result.innerHTML="平局";
                result.style.color="#000";
            }
            //当随机数为1时，让对手的背景图为“石头”，即背景图向左移动180px,并显示结果为“很遗憾，您输了，对手获胜”
            else if(n===1){
                right.style.backgroundPositionX="-180px";
                result.innerHTML="很遗憾，您输了，对手获胜";
                result.style.color="red";
            }
            //当随机数为2时，让对手的背景图为“布”，即背景图向左移动360px,并显示结果为"恭喜您，您赢了!!!"
            else if(n===2){
                right.style.backgroundPositionX="-360px";
                result.innerHTML="恭喜您，您赢了!!!";
                result.style.color="green";
            }
        }


         //当我方点击“石头”按钮时
         bn1.οnclick=function(){
            //我方出“石头”，此时背景图的位置向左移动180px
            left.style.backgroundPositionX="-180px";
            //生成随机数，括号后面的值代表是0-值（不包括这个值），由于我们需要三个值0,1,2，所以这个数为3
            var n=Math.random()*3;
            //生成的随机数默认是字符型的，要转换为数字型的
            n=parseInt(n);
            //当随机数为0时，让对手的背景图为“剪刀”，即背景图位置不变并显示结果为"恭喜您，您赢了！！！"
            if(n===0){
                right.style.backgroundPositionX="0px";
                result.innerHTML="恭喜您，您赢了！！！";
                result.style.color="green";
            }
            //当随机数为1时，让对手的背景图为“石头”，即背景图向左移动180px,并显示结果为“平局”
            else if(n===1){
                right.style.backgroundPositionX="-180px";
                result.innerHTML="平局";
                result.style.color="#000";
            }
            //当随机数为2时，让对手的背景图为“布”，即背景图向左移动360px,并显示结果为"很遗憾，您输了，对手获胜"
            else if(n===2){
                right.style.backgroundPositionX="-360px";
                result.innerHTML="很遗憾，您输了，对手获胜";
                result.style.color="red";
            }
        }

         //当我方点击“布”按钮时
         bn2.οnclick=function(){
            //我方出“布”，此时背景图的位置向左移动360px
            left.style.backgroundPositionX="-360px";
            //生成随机数，括号后面的值代表是0-值（不包括这个值），由于我们需要三个值0,1,2，所以这个数为3
            var n=Math.random()*3;
            //生成的随机数默认是字符型的，要转换为数字型的
            n=parseInt(n);
            //当随机数为0时，让对手的背景图为“剪刀”，即背景图位置不变并显示结果为"很遗憾，您输了，对手获胜"
            if(n===0){
                right.style.backgroundPositionX="0px";
                result.innerHTML="很遗憾，您输了，对手获胜";
                result.style.color="red";
            }
            //当随机数为1时，让对手的背景图为“石头”，即背景图向左移动180px,并显示结果为“恭喜您，您赢了！！！”
            else if(n===1){
                right.style.backgroundPositionX="-180px";
                result.innerHTML="恭喜您，您赢了！！！";
                result.style.color="green";
            }
            //当随机数为2时，让对手的背景图为“布”，即背景图向左移动360px,并显示结果为"平局"
            else if(n===2){
                right.style.backgroundPositionX="-360px";
                result.innerHTML="平局";
                result.style.color="#000";
            }
        }
    </script>
</body>
</html>