快捷導(dǎo)航

angularjs實(shí)現(xiàn)猜大小功能

更新時(shí)間：2017年10月23日 11:34:32 作者：飛鳥(niǎo)96

這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)猜大小功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了angular.js數(shù)字猜大小的具體代碼，供大家參考，具體內(nèi)容如下

<!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>請(qǐng)輸入一個(gè)1-10的整數(shù)</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">猜對(duì)了</p>
 <p>你一共才了<span ng-bind="num">0</span>次</p>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解angular臟檢查原理及偽代碼實(shí)現(xiàn)
這篇文章主要介紹了詳解angular臟檢查原理及偽代碼實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
利用angular.copy取消變量的雙向綁定與解析
眾所周知AngularJS的雙向綁定在表單應(yīng)用中強(qiáng)大又方便，但是偶爾會(huì)遇到需要解除對(duì)象變量的雙向綁定。Angular提供的angular.copy的方法可以實(shí)現(xiàn)解除雙向綁定。所以這篇文章就來(lái)給大家詳細(xì)的介紹下angular.copy，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-11-11
Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)
這篇文章主要介紹了 Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)的相關(guān)資料,需要的朋友可以參考下
2016-12-12
走進(jìn)AngularJs之過(guò)濾器（filter）詳解
本篇文章主要介紹了AngularJs之過(guò)濾器（filter）詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
詳解Angular Reactive Form 表單驗(yàn)證
本文我們將介紹 Reactive Form 表單驗(yàn)證的相關(guān)知識(shí)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
將angular-ui的分頁(yè)組件封裝成指令的方法詳解
這篇文章主要給大家介紹了將angular-ui的分頁(yè)組件封裝成指令的方法，文中介紹的非常詳細(xì)，相信會(huì)對(duì)大家的學(xué)習(xí)或者工作覺(jué)有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。
2017-05-05
詳解Angularjs 自定義指令中的數(shù)據(jù)綁定
這篇文章主要介紹了Angularjs 自定義指令中的數(shù)據(jù)綁定，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
angularjs實(shí)現(xiàn)分頁(yè)和搜索功能
這篇文章主要介紹了angularjs實(shí)現(xiàn)分頁(yè)和搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
Angularjs 自定義服務(wù)的三種方式(推薦)
angularjs 中可通過(guò)三種（$provider,$factory,$service）方式自定義服務(wù)。這篇文章主要介紹了Angularjs 自定義服務(wù)的三種方式,非常不錯(cuò)，需要的朋友可以參考下
2016-08-08
詳解Angular項(xiàng)目中共享模塊的實(shí)現(xiàn)
本文主要介紹了Angular的共享模塊的實(shí)現(xiàn)，對(duì)此感興趣的同學(xué)，可以實(shí)驗(yàn)一下
2021-05-05