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 获取和设置Select选项的代码
Feb 07 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
HTML上传控件取消选择
Mar 06 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
javascript数组去重方法分析
Dec 15 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
js实现无缝滚动双图切换效果
Jul 09 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
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
js创建对象的方式总结
2015/01/10 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
详解Python打包分发工具setuptools
2019/08/05 Python
一行python实现树形结构的方法
2019/08/09 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
Shell编程面试题
2012/05/30 面试题
宣传普通话标语
2014/06/27 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
婚前协议书标准版
2014/10/19 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书