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 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
js使用formData实现批量上传
Mar 27 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
基于ts的动态接口数据配置的详解
Dec 18 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 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计算数组不为空元素个数的方法
2014/01/27 PHP
PHP合并静态文件详解
2014/11/14 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
Python正则表达式介绍
2012/08/06 Python
python文件比较示例分享
2014/01/10 Python
python实现代码行数统计示例分享
2014/02/10 Python
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
python用户管理系统
2018/03/13 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
公务员党员评议表自我鉴定
2014/09/14 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
SSM VUE Axios详解
2021/10/05 Vue.js
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技