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 相关文章推荐
js禁止回车提交表单的示例代码
Dec 23 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
详解在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/04/23 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php简单smarty入门程序实例
2015/06/11 PHP
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python with用法实例
2015/04/14 Python
详细解读Python中的__init__()方法
2015/05/02 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python是否适合网页编程详解
2019/10/04 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
怎样声明接口
2014/09/19 面试题
应届生法律顾问求职信
2013/11/19 职场文书
销售总监工作职责
2013/11/21 职场文书
大学运动会通讯稿
2014/01/28 职场文书
《自然之道》教学反思
2014/02/11 职场文书
机关出纳岗位职责
2014/04/03 职场文书
学校个人对照检查材料
2014/08/26 职场文书
店铺转让协议书
2015/01/29 职场文书
小学端午节活动总结
2015/02/11 职场文书
志愿者个人总结
2015/03/03 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android