angularjs实现猜数字大小功能


Posted in Javascript onMay 20, 2020

本文实例为大家分享了angularjs实现猜数字大小功能的具体代码,供大家参考,具体内容如下

<body ng-app="myapp" ng-controller="myCtrl">
 <h2>猜一猜,多大值?(1-1000)</h2>
 我猜是:<input type="text" ng-model="guess">
 <button ng-click="check()">验证</button><button ng-click="reset()">再玩一次</button><br>
 <span ng-if="fil>0">您猜的数大了</span>
 <span ng-if="fil<0">您猜的数小了</span>
 <span ng-if="fil==0">您猜对了</span>
 <p>猜的次数<span>{{n}}</span></p>
</body>

js代码:

<script src="angular.min.js"></script>
 <script>
 var myapp=angular.module("myapp",[]);
 myapp.controller("myCtrl",function ($scope) {


//验证
  $scope.check=function () {
  console.log($scope.random); //根据差值判断显示、隐藏状态
  $scope.fil=$scope.guess-$scope.random;
  $scope.n++;

  };




//重置方法
  $scope.reset=function () {
  $scope.guess=null;
  $scope.fil=null;
  $scope.n = 0;




 //得到随机数
  $scope.random=Math.ceil(Math.random()*1000);
  };
  $scope.reset();
 })



 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
angular指令笔记ng-options的使用方法
Sep 18 #Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
javascript  删除select中的所有option的实例
Sep 17 #Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 #Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 #Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 #Javascript
基于js的变量提升和函数提升(详解)
Sep 17 #Javascript
You might like
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
《望洞庭》教学反思
2014/02/16 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
《学棋》教后反思
2014/04/14 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
2014年保育员工作总结
2014/12/02 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis