jQuery学习(1)猜数字游戏
jQuery是一个快捷、小型且特征丰富的JavaScript库。它使得HTML文档遍历及操作,事件处理,动画,Ajax等更简洁方便。它通过调用一个简单易用的API,就能在各种浏览器中使用。由于jQuery本身很好的兼容性和延展性,它的出现改变了千百万使用者书写JavaScript的习惯。
本次分享将会对jQuery的学习做一个简单的应用,那就是猜数字游戏。
开始页面如下:
![开始页面](http://img.blog.csdn.net/20180116101400264?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
我们有必要对该游戏的处理逻辑做一些简单的分析。首先,后台会随机产生一个1-100之间的整数。然后,用户在输入框中进行输入操作,当输入不是数字时,则弹出对话框并提示;如果输入的数字100,则则弹出对话框并提示;如果输入的数字等于产生的随机数,则提出输入正确;若如果输入的数字小于产生的随机数,则提出输入的数字过小;若如果输入的数字小于产生的随机数,则提出输入的数字过小。
完整的jQuery代码如下:
```JavaScript
```,表示加载jQuery库,加载的方式可以是先从网上下载jQuery库到本地,然后在标签中加载其本地地址;也可是直接通过CDN加载,不需要加载到本地,版本3.2.1的CDN地址如下:
![版本3.2.1的CDN地址](http://img.blog.csdn.net/20180116102432832?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
加载完jQuery库后,就能在JavaScript中使用jQuery语法了。具体的语法可以参考jQuery API中文文档:https://www.jquery123.com/ .
猜数字游戏的示例操作如下:
![输入非数字](http://img.blog.csdn.net/20180116101854344?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![输入数字范围不对](http://img.blog.csdn.net/20180116101916362?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![正确的输入过程](http://img.blog.csdn.net/20180116101945711?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
本次分享到此结束,欢迎大家交流~~
jQuery学习(1)猜数字游戏的更多相关文章
- js 学习一 猜数字游戏
知识点 js 操作元素 增 (document.createElement(),document.body.appendChild()), 删(parentNode.removeChild()) ,改 ...
- python学习:猜数字游戏
猜数字游戏 系统生成一个100以内的随机整数, 玩家有6次机会进行猜猜看,每次猜测都有反馈(猜大了,猜小了,猜对了-结束) 6次中,猜对了,玩家赢了. 否则系统赢了 #!/usr/bin/en ...
- Python3基础学习-while循环实例- 猜数字游戏
需求: 猜数字游戏, 要求如下: 给个数字, 比如是66. 让用户一直猜,直到猜对退出. 中间输入q或Q也能退出 如果猜大了,提示用户猜小一点; 如果猜小了,提示用户猜大一点; likely = 66 ...
- 【原创Android游戏】--猜数字游戏V1.1 --数据存储,Intent,SimpleAdapter的学习与应用
--------------------------------------------------------------- V0.1版本 上次做完第一个版本后,发现还有一些漏洞,并且还有一些可以添 ...
- python学习笔记 ——python写的猜数字游戏 002
from sys import exit import random def Arrfor(str): #CONTST = CONTST + 1 artificial = input("请输 ...
- 【原创Android游戏】--猜数字游戏Version 0.1
想当年高中时经常和小伙伴在纸上或者黑板上或者学习机上玩猜数字的游戏,在当年那个手机等娱乐设备在我们那还不是很普遍的时候是很好的一个消遣的游戏,去年的时候便写了一个Android版的猜数字游戏,只是当时 ...
- 用MFC完成一个简单的猜数字游戏: 输入的四位数中,位置和数字都正确为A,数字相同而位置不同的为B。
最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...
- python猜数字游戏console版本
加入python学习小组后的第一次作业,python GUI写猜数字游戏.由于加班比较多,第一步先实现console版本,下一步再实现GUI版本. 虽然猜数字游戏是个小游戏,但是涉及到的基础知识点还是 ...
- 实验三 Java猜数字游戏开发
课程:Java实验 班级:201352 姓名:程涵 学号:20135210 成绩: 指导教师:娄佳鹏 实验日期:15.06.03 实验密级: ...
随机推荐
- (PMP)第9章-----项目资源管理
9.1 规划资源管理 数据表现: 1.层级型(高层次的角色):工作分解结构,组织分解结构,资源分解结构 2.责任分配矩阵:RAM,RACI,执行,负责,咨询,知情(只有一个A) 3.文本型(记录详细职 ...
- Unity3D连接本地或局域网MySQL数据库
准备工作: 1.打开 Unity3D 安装目录,到这个路径下 Editor > Data > Mono > lib > mono > 2.0 拷贝出下图的五个动态链接库, ...
- GIS中空间数据和非空间数据
- 基于dsp_builder的算法在FPGA上的实现(转自https://www.cnblogs.com/sunev/archive/2012/11/17/2774836.html)
一.摘要 结合dsp_builder.matlab.modelsim和quartus ii等软件完成算法的FPGA实现. 二.实验平台 硬件平台:DIY_DE2 软件平台:quartus ii9.0 ...
- CentOS6最佳实践
一 安装常用软件 常用目录结构 源文件目录 /application,原包文件及解压文件 如 /application/Python-3.6.0.tgz 软件配置目录 /usr/local/ 如 ...
- 调用opencv相关函数,从视频流中提取出图片序列&&&&jpg图片序列,转化成avi格式视频
/************************ @HJ 2017/3/30 参考http://blog.sina.com.cn/s/blog_4b0020f301010qcz.html修改的代码 ...
- 6. ASP.NET MVC 5.0 中的HTML Helper【HTML 帮助类】
这篇文章,我将带领大家学习HTML Helper.[PS:上一篇-->5.ASP.NET MVC 中的Area[区域]是什么] HTML Helpers是用来创建HTML标签进而创建HTML控件 ...
- maya2018卸载/安装失败/如何彻底卸载清除干净maya2018注册表和文件的方法
maya2018提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2018失败提示maya2018安装未完成,某些产品无法安装,也有时候想重新安装maya ...
- What does git fsck stand for?
fsck -> File System ChecK https://stackoverflow.com/questions/21151945/what-does-git-fsck-stand-f ...
- kubernetes集群搭建(1):环境准备
了解kubernets 本次搭建采用的是1个master节点,2个node节点,一个私有docker仓库 1.设置各节点ip信息 2.设置hostname(其它节点也需修改) vi /etc/sysc ...