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

最新推荐文章于 2022-03-13 15:58:53 发布

play_big_knife

最新推荐文章于 2022-03-13 15:58:53 发布

阅读量394

点赞数

分类专栏：前端文章标签： js if 前端选择代码

本文链接：https://blog.csdn.net/play_big_knife/article/details/117405461

版权

前端专栏收录该内容

18 篇文章 6 订阅

订阅专栏

前端基础：通过《猜价格》游戏实战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>

play_big_knife

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端基础：通过《猜价格》游戏实战js选择语句

前端基础：通过《猜价格》游戏实战js选择语句谈到选择，其实人生有好多选择。学生毕业是选择留下家长还是远走他乡是一种选择，站在人生的十字路口不知道往哪个方向走也是一种选择，如下图所示。程序也是一样的，在程序的执行过程中，也可能会遇到选择题。不过程序的选择是带有条件的判断，如果条件成立了则算是选择的成功，条件不成立则算是选择的失败，也就是条件是程序运行中能够做选择师的依据。如下图所示。一、项目说明该项目是对js选择语句的应用，if语句是精典的选择语句，实现的项目是电视台经常见到的猜..
复制链接

扫一扫