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和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
node通过express搭建自己的服务器
Sep 30 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
vue实现简易音乐播放器
Aug 14 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php中文验证码实现方法
2015/06/18 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
探究python中open函数的使用
2016/03/01 Python
Selenium定位元素操作示例
2018/08/10 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python的几种主动结束程序方式
2019/11/22 Python
python返回数组的索引实例
2019/11/28 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python实现图像拼接
2020/03/05 Python
学python最电脑配置有要求么
2020/07/05 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Python创建自己的加密货币的示例
2021/03/01 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
求职自荐信怎么写
2014/03/06 职场文书
催款函范文
2015/06/24 职场文书
2016年寒假见闻
2015/10/10 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL