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 EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
JavaScript 巧学巧用
May 23 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
微信小程序实现图片上传
May 23 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
python连接mongodb密码认证实例
2018/10/16 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
人力资源部门的主要职能
2014/02/22 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
单位租房协议书范本
2014/12/04 职场文书
安全教育主题班会教案
2015/08/12 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python