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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 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缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Django 前后台的数据传递的方法
2017/08/08 Python
python Xpath语法的使用
2020/11/26 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
公司财务会计主管应聘求职信
2014/09/26 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
MySQL系列之六 用户与授权
2021/07/02 MySQL
基于Go语言构建RESTful API服务
2021/07/25 Golang
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server