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 相关文章推荐
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
js实现文本框选中的方法
May 26 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
ES6对象操作实例详解
May 23 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
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
关于react中组件通信的几种方式详解
2017/12/10 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
angular6的table组件开发的实现示例
2018/12/26 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
总结Python中逻辑运算符的使用
2015/05/13 Python
Python中enumerate函数代码解析
2017/10/31 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python中字符串与编码示例代码
2019/05/20 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
什么是Python中的匿名函数
2020/06/02 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
美国校服网上商店:French Toast
2019/10/08 全球购物
国贸专业个人求职信分享
2013/12/04 职场文书
客户表扬信范文
2014/01/10 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
说明书范文
2014/05/07 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android