网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

前端基础:通过 《猜价格》游戏实战js选择语句

2021/5/30 21:03:38 人评论

前端基础:通过 《猜价格》游戏实战js选择语句 谈到选择,其实人生有好多选择。学生毕业是选择留下家长还是远走他乡是一种选择,站在人生的十字路口不知道往哪个方向走也是一种选择,如下图所示。 程序也是一样的,在程序…

前端基础:通过 《猜价格》游戏实战js选择语句

谈到选择,其实人生有好多选择。学生毕业是选择留下家长还是远走他乡是一种选择,站在人生的十字路口不知道往哪个方向走也是一种选择,如下图所示。

程序也是一样的,在程序的执行过程中,也可能会遇到选择题。不过程序的选择是带有条件的判断,如果条件成立了则算是选择的成功,条件不成立则算是选择的失败,也就是条件是程序运行中能够做选择师的依据。如下图所示。

一、项目说明

该项目是对js选择语句的应用,if语句是精典的选择语句,实现的项目是电视台经常见到的猜价格游戏,通过一个猜一个吉他的价格,如果猜大了,网页显示"猜大了,请刷新网页继续猜",如果猜小了,网页显示"猜小了,请刷新网页继续猜",如果猜对了,网页显示"恭喜你,猜对了"。

二、项目效果图展示

一般网页类的应用都需要布局页面,但这个项目只需要把用户回答的问题回写到网页上,不需要页面的布局效果。猜价格时的效果图如下图所示。

输入具体用户所猜的价格后如下图所示。

三、选择语句介绍

JavaScript中的条件选择if语句有以下三种。

1、条件判断语句

条件成立才执行。如果条件不成立,那就什么都不做。

格式:

if (条件表达式) {
    // 条件为真时,做的事情

}

2、条件分支语句

条件成立执行成功的条件语句,条件不成立执行不成功的条件语句。这种语句可能有多种语句不成功的判断条件。

单条件不成功的条件判断格式:

if (条件表达式) {
    // 条件为真时,做的事情

} else {
    // 条件为假时,做的事情

}

多条件不成功的条件判断格式:

if (条件表达式1) {
    // 条件1为真时,做的事情

} else if (条件表达式2) {
    // 条件1不满足,条件2满足时,做的事情

} else if (条件表达式3) {
    // 条件1、2不满足,条件3满足时,做的事情

} else {
    // 条件1、2、3都不满足时,做的事情
}

3、if语句的嵌套

当条件比较复杂时,出现了条件当中还有条件,也就是条件的嵌套。

条件嵌套的格式:

if (条件表达式1) {
        //条件1为真时,做的事情
        if (条件表达式2) {
            //条件表达式1条件下嵌套下的条件表达式2为真时,做的事情
        } else {
            //条件表达式1条件下嵌套下的条件表达式2为假时,做的事情
        }
} else {
        //条件1为假的时候,做的事情
        if (条件表达式2) {
            //条件表达式1条件下嵌套下的条件表达式2为真时,做的事情
        } else {
            //条件表达式1条件下嵌套下的条件表达式2为假时,做的事情
        }
}

四、《猜价格》游戏页面的简易css和简易布局

从显示结果上看,需要页面上显示一把吉他,并且设置页面的背景色为黑色,前景字体的颜色为白色,字体大小为30个像素单位,字体名称显示为"黑体"。

依据上面的描述,网页的HTML代码和CSS样式代码如下:

<html>
    <head>
        <title>猜价格</title>
        <style type="text/css">
            body{
            background-color:black;
            color:white;
            font-size:30px;
            font-family:"黑体";
            }
        </style>
    </head>
    <body>
        <center><p>请猜猜这把吉它的价格</p></center>
        <center><img src="jita.jpg" width=400 height=400/></center>
    </body>
</html>

五、《猜价格》游戏js代码

《趣味测试》是典型的比较正经的条件结构,首先通过prompt输入框来获取用户输入的价格答案,可以设置一个默认值,假定把这个数据存储在变量x中,变量可以理解成未知数,未知数常用的就是x,x也相当于戴上了"未知数"的帽子。接下来判断x里面接收的值跟吉他的正确价格620进行比较,先不管这个620是不是标准的吉他价格。如果猜大了,就使用document.write方法在网页中显示"猜大了,请刷新网页继续猜",如果猜小了,就使用document.write方法在网页中显示"猜小了,请刷新网页继续猜",如果猜正确了,就显示"恭喜你,猜对了"。典型的多条件不成功的条件判断格式。

具体代码内容如下。

<html>
        <head>
                <title>猜价格</title>
                <style type="text/css">
                    body{
                    background-color:black;
                    color:white;
                    font-size:30px;
                    font-family:"黑体";
                    }
                </style>
                <script type="text/javascript">
                    var x=prompt("请输入这把吉他的价格","500");
                    if (x<620) {
                        document.write("猜小了,请刷新网页继续猜!");
                    }else{
                        document.write("猜大了,请刷新网页继续猜!");
                    }
                </script>
        </head>
        <body>
                <center><p>请猜猜这把吉它的价格</p></center>
                <center><img src="jita.jpg" width=400 height=400/></center>
        </body>
</html>

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?