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 相关文章推荐
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 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 和 MySQL 基础教程(三)
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
浅析PHP水印技术
2007/02/14 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
php算法实例分享
2015/07/14 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python用input输入列表的实例代码
2020/02/07 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
explicit和implicit的含义
2012/11/15 面试题
感恩教育月活动总结
2014/07/07 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
党员证明模板
2015/06/19 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
python神经网络编程之手写数字识别
2021/05/08 Python