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 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JS继承用法实例分析
2015/02/05 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Django 路由层URLconf的实现
2019/12/30 Python
查看keras的默认backend实现方式
2020/06/19 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
环保建议书100字
2014/05/14 职场文书
加强作风建设工作总结
2014/10/23 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
出生证明范本
2015/06/15 职场文书
治庸问责工作总结
2015/08/11 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Go gorilla/sessions库安装使用
2022/08/14 Golang