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效率 一次判断,而不要次次判断
Mar 30 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
纯JS代码实现气泡效果
May 04 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
React 组件中的 bind(this)示例代码
Sep 16 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模板之Phpbean的目录结构
2008/01/10 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
js中document.write的那点事
2014/12/12 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
python zip文件 压缩
2008/12/24 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python调用C语言程序方法解析
2020/07/07 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
春季运动会广播稿大全
2014/02/19 职场文书
军训口号
2014/06/13 职场文书
尊师重教演讲稿
2014/09/04 职场文书
运动会加油稿20字
2014/11/15 职场文书
悬空寺导游词
2015/02/05 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
Python Pandas常用函数方法总结
2021/06/15 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL