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获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
师范生个人推荐信
2013/11/29 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
企业贷款委托书格式
2014/09/12 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
给老婆的保证书
2015/01/16 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python