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 的 prototype问题。
Jan 03 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
jquery cookie的用法总结
Nov 18 Javascript
javascript中caller和callee详解
Aug 10 Javascript
javascript学习之json入门
Dec 22 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
js如何验证密码强度
Mar 18 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
如何让vue长列表快速加载
Mar 29 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
smarty内置函数section的用法
2015/01/22 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
vue的for循环使用方法
2019/02/12 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python简单区块链模拟详解
2019/07/03 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
团代会宣传工作方案
2014/05/08 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
文艺委员竞选稿
2015/11/19 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers