zoukankan      html  css  js  c++  java
  • 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之间的整数。然后,用户在输入框中进行输入操作,当输入不是数字时,则弹出对话框并提示;如果输入的数字<1或者>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)
      本次分享到此结束,欢迎大家交流~~
  • 相关阅读:
    Linux 常用命令
    silky微服务简介
    okhttp中的Builder模式
    Assert in C#&Java
    Abstract类中使用@Autowire
    @Scope("prototype") bean scope not creating new bean
    【转】centos系统查看cpu内存等情况
    hdu 7013 String Mod 题解
    牛客 11259 H Scholomance Academy 题解
    bzoj 2151 种树 题解
  • 原文地址:https://www.cnblogs.com/jclian91/p/8295286.html
Copyright © 2011-2022 走看看