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 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
浅谈PHP的反射机制
2016/12/15 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
python selenium xpath定位操作
2020/09/01 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
什么是抽象
2015/12/13 面试题
岗位安全生产责任书
2014/07/28 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL