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 金额文本框实现代码
Feb 14 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
vue插件实现v-model功能
Sep 10 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP学习笔记之session
2018/05/06 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
详解VueJs中的V-bind指令
2018/05/03 Javascript
js html实现计算器功能
2018/11/13 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
用Python创建声明性迷你语言的教程
2015/04/13 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python socket处理client连接过程解析
2020/03/18 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
诚信考试主题班会
2015/08/17 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电