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 相关文章推荐
jQuery 创建Dom元素
May 07 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
详解vue中axios的封装
Jul 18 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
php查询及多条件查询
2017/02/26 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Python中IPYTHON入门实例
2015/05/11 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
高中生期末评语
2014/01/28 职场文书
电钳工人个人求职信
2014/05/10 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2016开学第一课心得体会
2016/01/23 职场文书