1.1.6　实验步骤

1.1.6　实验步骤

任务1实验分解：

（1） 桌面双击HBuilderX 进入开发界面，如图1.2所示。

图1.2

（2） 选择“文件新建项目”菜单，进入新建项目界面，如图1.3所示。

图1.3

（3） 选择普通项目，输入项目名称“GuessingGame”，并选择空项目。点击创建按钮，如图1.4所示。

图1.4

（4） 在项目窗口GuessingGame上，右键选择“新建html文件”，输入文件名称“index”，点击创建按钮，如图1.5所示。

图1.5

（5） 在新建文件下，写入如下基础代码。

效果如图1.6所示。

图1.6

（6） 在实验资料与素材中找到jQuery-3.4.1.js文件，选中文件复制，并粘贴到项目中，如图1.7所示。

图1.7

（7） 在页面的＜head＞标签末尾加上jQuery 的引入代码。

（8） 利用jQuery 加载函数结合JavaScript的Math对象产生1-50随机数。

代码如下：

至此完成任务1的所有功能要求。

任务2实验分解：

（1） 利用jQuery 的绑定事件语法，给按钮绑定一个点击事件。

新加代码如下：

（2） 在点击事件中完成数据验证（任务2后面所有操作都在前面的点击事件中完成）。

新加代码如下：

效果如图1.8和图1.9所示。

图1.8

图1.9

（3） 将输入的数字与前面产生的随机数进行比较。

效果如图1.10所示。

图1.10

至此完成任务2所有要求。

任务3实验分解：

（1） 将当前按钮禁用。

新加代码如下：

至此完成任务3所有要求。