快捷導(dǎo)航

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

更新時(shí)間：2020年05月20日 16:56:36 作者：XJian

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

本文實(shí)例為大家分享了angularjs實(shí)現(xiàn)猜數(shù)字大小功能的具體代碼，供大家參考，具體內(nèi)容如下

<body ng-app="myapp" ng-controller="myCtrl">
 <h2>猜一猜，多大值？（1-1000）</h2>
 我猜是:<input type="text" ng-model="guess">
 <button ng-click="check()">驗(yàn)證</button><button ng-click="reset()">再玩一次</button><br>
 <span ng-if="fil>0">您猜的數(shù)大了</span>
 <span ng-if="fil<0">您猜的數(shù)小了</span>
 <span ng-if="fil==0">您猜對(duì)了</span>
 <p>猜的次數(shù)<span>{{n}}</span></p>
</body>

js代碼：

<script src="angular.min.js"></script>
 <script>
 var myapp=angular.module("myapp",[]);
 myapp.controller("myCtrl",function ($scope) {
　　　　　　//驗(yàn)證
  $scope.check=function () {
  console.log($scope.random);　//根據(jù)差值判斷顯示、隱藏狀態(tài)
  $scope.fil=$scope.guess-$scope.random;
  $scope.n++;

  };　　　　　　　　　　//重置方法
  $scope.reset=function () {
  $scope.guess=null;
  $scope.fil=null;
  $scope.n = 0;　　　　　　　　　　　//得到隨機(jī)數(shù)
  $scope.random=Math.ceil(Math.random()*1000);
  };
  $scope.reset();
 })



 </script>

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

您可能感興趣的文章:

相關(guān)文章

Angular Renderer (渲染器)的具體使用
這篇文章主要介紹了Angular Renderer (渲染器)的具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
Angular ng-repeat 對(duì)象和數(shù)組遍歷實(shí)例
這篇文章主要介紹了Angular ng-repeat對(duì)象和數(shù)組遍歷的相關(guān)資料,并附代碼示例，需要的朋友可以參考下
2016-09-09
Angular中使用響應(yīng)式表單的詳細(xì)步驟
Angular提供了兩種處理表單的方式模板驅(qū)動(dòng)表單和響應(yīng)式表單（也稱為模型驅(qū)動(dòng)表單）,使用模板驅(qū)動(dòng)表單時(shí),模板指令被用來(lái)構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個(gè)示例 Angular 應(yīng)用程序
2024-02-02
RequireJs的使用詳解
本文主要介紹了RequireJs的使用。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
深入理解Angular4訂閱(Subscribe)與取消
這篇文章主要介紹了深入理解Angular4訂閱(Subscribe)與取消，詳細(xì)的介紹了訂閱與取消的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
Angularjs的啟動(dòng)過(guò)程分析
本篇文章主要介紹了Angularjs的啟動(dòng)過(guò)程分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
基于AngularJS實(shí)現(xiàn)頁(yè)面滾動(dòng)到底自動(dòng)加載數(shù)據(jù)的功能
本文主要給大家介紹基于AngularJS實(shí)現(xiàn)頁(yè)面滾動(dòng)到底自動(dòng)加載數(shù)據(jù)的功能，通過(guò)第三方控件來(lái)實(shí)現(xiàn)，感興趣的朋友跟著小編一起看看具體實(shí)現(xiàn)代碼吧
2015-10-10
Angular彈出模態(tài)框的兩種方式
這篇文章主要介紹了Angular彈出模態(tài)框的兩種方式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-10-10
Angular懶加載機(jī)制刷新后無(wú)法回退的快速解決方法
使用oclazyload懶加載angular的模塊,刷新頁(yè)面后,單擊回退按鈕無(wú)法返回上一個(gè)頁(yè)面.怎么回事呢？下面小編給大家?guī)?lái)了angular懶加載機(jī)制刷新后無(wú)法回退的快速解決方法，非常不錯(cuò)，感興趣的朋友參考下
2016-08-08
Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-05-05