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 对象中的类数组操作
Apr 27 Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
Vue实现验证码功能
2019/12/03 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python模拟百度登录实例详解
2016/01/20 Python
Python实现购物车程序
2018/04/16 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
python实现移动木板小游戏
2020/10/09 Python
Python和Bash结合在一起的方法
2020/11/13 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
学校元旦晚会方案
2014/02/19 职场文书
初中同学会活动方案
2014/08/22 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
企业安全生产规章制度
2015/08/06 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
vue中data里面的数据相互使用方式
2022/06/05 Vue.js
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript