AngularJS实现的生成随机数与猜数字大小功能示例


Posted in Javascript onDecember 25, 2017

本文实例讲述了AngularJS实现的生成随机数与猜数字大小功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>3water.com Angular猜数</title>
 <style>
  *{
   margin: 0;
   padding: 0;
   font-size: 30px;
  }
  input{
   width: 500px;
   height: 50px;
   font-size: 30px;
  }
  button{
   width: 80px;
   height: 50px;
   border: 0;
   text-align: center;
   line-height: 50px;
   background: darkblue;
   color: #fff;
   margin-left: 5px;
  }
 </style>
 <script src="angular/angular.js"></script>
 <script>
  var myapp=angular.module("myapp",[]);
  myapp.controller("myCtrl",function ($scope) {
    $scope.check=function () {
     console.log($scope.random);
     $scope.differ=$scope.guess-$scope.random;
     $scope.num++;
    };
    $scope.reset=function () {
     $scope.differ=null;
     $scope.guess=null;
     $scope.num=0;
     $scope.random=Math.ceil(Math.random()*10);
    };
    $scope.reset();
  })
 </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>请输入一个1-10的整数</h2>
<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"></span>次</p>
</body>
</html>

运行效果:

AngularJS实现的生成随机数与猜数字大小功能示例

AngularJS实现的生成随机数与猜数字大小功能示例

Javascript 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
页面中js执行顺序
Nov 09 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
Element Badge标记的使用方法
Jul 27 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 #Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 #Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
Webpack优化配置缩小文件搜索范围
Dec 25 #Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 #Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 #Javascript
You might like
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
PHP 数组实例说明
2008/08/18 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
语义化 H1 标签
2008/01/14 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
初三学习计划书范文
2014/04/30 职场文书
施工安全承诺书
2014/05/22 职场文书
党员志愿者活动方案
2014/08/28 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
个人典型事迹材料
2014/12/30 职场文书
节约用电通知
2015/04/25 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
JavaScript前端面试组合函数
2022/06/21 Javascript