angularjs实现猜大小功能


Posted in Javascript onOctober 23, 2017

本文实例为大家分享了angular.js数字猜大小的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>猜大小</title>
 <script src="angular-1.5.5/angular.min.js"></script>
 <style>
  *{
   margin:0;
   padding:0;
   font-size: 30px;
  }
  input{
   width: 500px;
   height: 50px;
  }
  button{
   width: 80px;
   height: 50px;
   border: 0;
   text-align: center;
   line-height: 50px;
   color: white;
   margin-left: 5px;
  }
 </style>
 <script>
  var m=angular.module("m",[]);
  m.controller("my",function ($scope) {
   $scope.check=function () {
    $scope.differ=$scope.guess-$scope.random;
    $scope.num++;
   }
   $scope.reset=function () {
    $scope.guess=null;
    $scope.differ=null;
    $scope.num=0;
    $scope.random=Math.ceil(Math.random()*10);
   }
   $scope.reset();
  })
 </script>
</head>
<body ng-app="m" ng-controller="my">
<h1>请输入一个1-10的整数</h1>
 <input type="text" ng-model="guess"/><button ng-click="check()">检查</button><button ng-click="reset()">重置</button>
 <p ng-if="differ>0">猜大了</p>
 <p ng-if="differ<0">猜小了</p>
 <p ng-if="differ==0">猜对了</p>
 <p>你一共才了<span ng-bind="num">0</span>次</p>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
原生JS实现不断变化的标签
May 22 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 #Javascript
angularjs实现天气预报功能
Jun 16 #Javascript
angular.js实现购物车功能
Oct 23 #Javascript
使用store来优化React组件的方法
Oct 23 #Javascript
node文件批量重命名的方法示例
Oct 23 #Javascript
详解vue 实例方法和数据
Oct 23 #Javascript
深入浅析javascript继承体系
Oct 23 #Javascript
You might like
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP children()函数讲解
2019/02/03 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python循环实现n的全排列功能
2019/09/16 Python
django queryset相加和筛选教程
2020/05/18 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
美国眼镜网站:LensCrafters
2020/01/19 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
学习演讲稿范文
2014/05/10 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
与美同行演讲稿
2014/09/13 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
检讨书1000字
2014/10/11 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
施工现场安全管理制度
2015/08/05 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript