angularjs实现猜大小功能

 更新时间:2017年10月23日 11:34:32   作者:飞鸟96  
这篇文章主要为大家详细介绍了angularjs实现猜大小功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Angularjs实现数组随机排序的方法

    Angularjs实现数组随机排序的方法

    今天小编就为大家分享一篇Angularjs实现数组随机排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angular 5.x 学习笔记之Router(路由)应用

    Angular 5.x 学习笔记之Router(路由)应用

    本篇文章主要介绍了Angular 5.x 学习笔记之Router(路由)应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 对angularJs中controller控制器scope父子集作用域的实例讲解

    对angularJs中controller控制器scope父子集作用域的实例讲解

    今天小编就为大家分享一篇对angularJs中controller控制器scope父子集作用域的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 浅析AngularJS中的指令

    浅析AngularJS中的指令

    指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令
    2016-03-03
  • angularjs实现搜索的关键字在正文中高亮出来

    angularjs实现搜索的关键字在正文中高亮出来

    这篇文章主要介绍了angularjs实现搜索的关键字在正文中高亮出来,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 简述Angular 5 快速入门

    简述Angular 5 快速入门

    这篇文章主要介绍了简述Angular 5 快速入门,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Angular中的$watch方法详解

    Angular中的$watch方法详解

    本文通过实例代码给大家介绍了Angular中的$watch方法,包括$watch简介及基本用法,需要的朋友参考下吧
    2017-09-09
  • AngularJS入门教程之静态模板详解

    AngularJS入门教程之静态模板详解

    本文主要介绍AngularJS 静态模板,这里整理了相关的基础资料,会帮助大家学习基础的AngularJS的基础知识,有需要的小伙伴可以参考下
    2016-08-08
  • AngularJS入门教程之ng-checked 指令详解

    AngularJS入门教程之ng-checked 指令详解

    本文主要讲解AngularJS ng-checked 指令,在这整理ng-checked 指令的基础知识,并附代码实例,有需要的小伙伴可以参考下
    2016-08-08
  • AngularJS中比较两个数组是否相同

    AngularJS中比较两个数组是否相同

    这篇文章主要介绍了AngularJS中比较两个数组是否相同,介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-08-08

最新评论