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 相关文章推荐
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 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
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
微信小程序组件 marquee实例详解
2017/06/23 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
详解python3中tkinter知识点
2018/06/21 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python通过实例讲解反射机制
2019/10/17 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
冰淇淋开店创业计划书
2014/02/01 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
2019新员工心得体会
2019/06/25 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js