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定义类和对象的方法
Nov 26 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
Javascript之Date对象详解
Jun 07 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 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
星际争霸中的热键
2020/03/04 星际争霸
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
Python描述器descriptor详解
2015/02/03 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python实现简单的语音识别系统
2017/12/13 Python
Django自定义manage命令实例代码
2018/02/11 Python
python 获取字符串MD5值方法
2018/05/29 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
给酒店员工的表扬信
2014/01/11 职场文书
《画风》教学反思
2014/04/16 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
商业计划书范文
2019/04/24 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
MySQL数据库完全卸载的方法
2022/03/03 MySQL