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编写COM组件的步骤
Mar 17 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
TypeScript 中接口详解
Jun 19 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
用vue设计一个日历表
Dec 03 Vue.js
详解在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中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP如何实现跨域
2016/05/30 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
Three.js学习之网格
2016/08/10 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
部署Python的框架下的web app的详细教程
2015/04/30 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python 多核并行计算的示例代码
2017/11/07 Python
numpy中的高维数组转置实例
2018/04/17 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
对python 自定义协议的方法详解
2019/02/13 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
应届生保险求职信
2013/11/11 职场文书
党员民主生活会材料
2014/12/15 职场文书
前台接待员岗位职责
2015/04/15 职场文书