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 滚动条事件简单实例
Jul 12 Javascript
js中的this关键字详解
Sep 25 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
js实现网页随机验证码
Oct 19 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小偷相关截取函数备忘
2010/11/28 PHP
PHP简洁函数小结
2011/08/12 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
JavaScript效率调优经验
2009/06/04 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python中__slots__用法实例
2015/06/04 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python3调用windows dos命令的例子
2019/08/14 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
教师党员思想汇报
2014/01/06 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
长江三峡导游词
2015/01/31 职场文书
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技