之前自己就学了点AnjularJS,都是在菜鸟教程里面将基础的只是大致过了一遍,没怎么自己动手做什么东西练练手,但还是觉得纸上得来终觉浅,得知此事要躬行啊,今天就做了个猜数字的小游戏,觉得效果还不错,心情也大好,看来还是得多练啊。好了,废话少说,还是说说效果怎么实现的吧。

既然是AnjularLS项目首先要引入AnjularJS文件

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

我们都知道脚本一般都在body底部引入,但是在AnjularJS的项目中将AnjularJS脚本文件放在head部分,因为document要引用AnjularJS里面的内容

那我们再来说说游戏规则

电脑随机产生一个数字,与你输入的数字比较,如果你输入的数字大于电脑产生的数字,则提示输入的数字偏大,如果偏小则提示偏小,相等则猜对了。并记录你猜了多少次。

再来分析分析总共几个变量

1、orignNumber 电脑随机产生的数字

2、value 你输入的数字

3、count 猜的次数

4、bj(比较)你猜的数字与电脑产生的数字的比较

下面是html代码

	<div>
<h3>猜数字</h3>
<p>请猜出电脑生成的随机数,它的范围在0-10之间</p>
<input type="text" ng-model="value">
<button ng-click="guess()">确定</button><button ng-click="again()">重来</button>
<p ng-show='bj>0'>猜的数字偏大</p>
<p ng-show='bj<0'>猜的数字偏小</p>
<p ng-show='bj==0'>哈哈,恭喜你猜对了!</p>
<p>您总共猜了{{count}}次</p>
</div>

下面是AnjularJS文件

		var app=angular.module('myApp',[]);
app.controller('ctr',function($scope){
$scope.count=0;
$scope.value=null;
$scope.orignNumber=Math.floor(Math.random()*100)+1;
$scope.guess=function(){
$scope.count++;
// 比较
$scope.bj=$scope.value-$scope.orignNumber;
}
$scope.again=function(){
$scope.count=0;
$scope.value=null;
$scope.orignNumber=Math.floor(Math.random()*100)+1;
$scope.bj=null; } })

  下面看看效果截图

AnjularJS小项目,小案例,练手,猜数字的更多相关文章

  1. 第三节,CNN案例-mnist手写数字识别

    卷积:神经网络不再是对每个像素做处理,而是对一小块区域的处理,这种做法加强了图像信息的连续性,使得神经网络看到的是一个图像,而非一个点,同时也加深了神经网络对图像的理解,卷积神经网络有一个批量过滤器, ...

  2. scala练手之数字转汉字小工具

    输入数字,转换成汉字,在统计数据量时很好用,而输入数字转成大写汉字,可以用于填写收据报销单哦 下载链接 https://pan.baidu.com/s/1nv3Ci6l 效果图如下: 直接上代码 ob ...

  3. vue练手小项目--眼镜在线试戴

    最近看到了一个眼镜在线试戴小项目使用纯js手写的,本人刚学习vue.js没多久,便试试用vue做做看了,还没完善. 其中包括初始图片加载,使用keywords查找,父子组件之间传递信息,子组件之间传递 ...

  4. mnist手写数字识别——深度学习入门项目(tensorflow+keras+Sequential模型)

    前言 今天记录一下深度学习的另外一个入门项目——<mnist数据集手写数字识别>,这是一个入门必备的学习案例,主要使用了tensorflow下的keras网络结构的Sequential模型 ...

  5. 一看就懂的K近邻算法(KNN),K-D树,并实现手写数字识别!

    1. 什么是KNN 1.1 KNN的通俗解释 何谓K近邻算法,即K-Nearest Neighbor algorithm,简称KNN算法,单从名字来猜想,可以简单粗暴的认为是:K个最近的邻居,当K=1 ...

  6. [易学易懂系列|rustlang语言|零基础|快速入门|(23)|实战1:猜数字游戏]

    [易学易懂系列|rustlang语言|零基础|快速入门|(23)|实战1:猜数字游戏] 项目实战 实战1:猜数字游戏 我们今天来来开始简单的项目实战. 第一个简单项目是猜数字游戏. 简单来说,系统给了 ...

  7. 初始Spring MVC——练手小项目

    初始Spring MVC 前几天开始了我的spring学习之旅,由于之前使用过MVC模式来做项目,所以我先下手的是 Spring MVC,做个练手项目,非常简单 项目介绍: 用户输入信息 -> ...

  8. 微信小程序初体验,入门练手项目--通讯录,部署上线(二)

    接上一篇<微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器>:https://www.cnblogs.com/chengxs/p/9898670.html 开发微信小程序最尴尬 ...

  9. 微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器(一)

    内容: 一.前言 二.相关概念 三.开始工作 四.启动项目起来 五.项目结构 六.设计理念 七.路由 八.部署线上后端服务 同步交流学习社区: https://www.mwcxs.top/page/4 ...

随机推荐

  1. hdu 4489 The King’s Ups and Downs(基础dp)

    The King’s Ups and Downs Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  2. Android Studio初级介绍

    Android Studio原来不咋地,但是现在可以尝试抛弃eclipse转用它了, 亲儿子到底是亲儿子,现在的Android Studio已经今非昔比,用了一段时间,简直爱不释手,我觉得,It's ...

  3. JVM 参数配置及详解 -Xms -Xmx -Xmn -Xss 调优总结

    堆大小设置 JVM 中最大堆大小有三方面限制: ①.相关操作系统的数据模型(32-bt还是64-bit)限制; ②.系统的可用虚拟内存限制; ③.系统的可用物理内存限制. 32位系统 下,一般限制在1 ...

  4. SQL SERVER 2008 数据库置疑处理办法

    1.修改数据库为紧急模式 ALTER DATABASE Zhangxing SET EMERGENCY 2.使数据库变为单用户模式 ALTER DATABASE Zhangxing SET SINGL ...

  5. Unity3d插件研究之Easytouch

    但我们开发移动端的游戏时,发现使用Input.GetMouseButtonDown的方法不可用,怎么办? 虽然unity3d也有自带触屏的方法,但是使用起来代价太高,什么单击,双击这些功能都要自己封装 ...

  6. Object.keys()的简单理解

    1.对象的话返回属性名 var obj = {'a':'123','b':'345'}; console.log(Object.keys(obj)); //['a','b'] var obj1 = { ...

  7. [Android Pro] 获取手机已经安装的应用 和 获取当前正在运行的所有进程(一个uid对应多个pid)

    1: 获取PackageManager 获取全部静态已安装的应用: PackageManager pm = getPackageManager(); List<PackageInfo> i ...

  8. 各种语言性能(CPU密集型程序)比较

    都进行Fib数列计算,计算到n=40的计算时间: 注意:开始,我以为上图中的第二列就是代表C++的性能.但是现在发现,完全不正确. 如果你使用同样的抽象和同样的逻辑去实现同样的代码,C和C++的性能几 ...

  9. Django出现的错误1.TypeError: view must be a callable or a list/tuple in the case of include().1.TypeError: view must be a callable or a list/tuple in the case of include().

    .TypeError: view must be a callable or a list/tuple in the case of include(). 原因: url(r"^upload ...

  10. Parameter pack

    Parameter pack   C++   C++ language   Templates   A template parameter pack is a template parameter ...