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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python实现的栈(Stack)
2018/01/26 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
给小学生的新年寄语
2014/04/04 职场文书
英文演讲稿
2014/05/15 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
实习计划书范文
2015/01/16 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
在Docker容器中部署SQL Server
2022/04/11 Servers