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

您所在的位置:网站首页 竞猜价格游戏怎么玩 前端基础:通过 《猜价格》游戏实战js选择语句

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

2024-07-16 18:20| 来源: 网络整理| 查看: 265

前端基础:通过 《猜价格》游戏实战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样式代码如下:

猜价格 body{ background-color:black; color:white; font-size:30px; font-family:"黑体"; }

请猜猜这把吉它的价格

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

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

具体代码内容如下。

猜价格 body{ background-color:black; color:white; font-size:30px; font-family:"黑体"; } var x=prompt("请输入这把吉他的价格","500"); if (x


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3