suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie die Funktion zum Erraten der Größe von Zahlen in AngularJS

So implementieren Sie die Funktion zum Erraten der Größe von Zahlen in AngularJS

亚连
亚连Original
2018-06-15 15:14:361296Durchsuche

In diesem Artikel werden hauptsächlich die von AngularJS implementierten Funktionen zum Generieren von Zufallszahlen und zum Erraten der Zahlengröße vorgestellt. Er analysiert die Betriebsfähigkeiten im Zusammenhang mit der Zufallszahlengenerierung und der numerischen Bestimmung von AngularJS in Form eines vollständigen Beispiels dazu

Das Beispiel dieses Artikels beschreibt die von AngularJS implementierten Funktionen zum Generieren von Zufallszahlen und zum Erraten der Größe von Zahlen. Teilen Sie es allen als Referenz mit. Die Details lauten wie folgt: 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net 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>

Betriebseffekt:

Das Obige ist das, was ich für alle zusammengestellt habe. Ja, ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Über die virtuelle Bildlaufleiste 2.x in vue.js

Wie classList zwei Schaltflächenstile implementiert Switch

So integrieren Sie zTree-Code in Angular

Node-Packaging-Tool Pkg (ausführliches Tutorial)

Wie js verwenden, um die App in WeChat aufzurufen?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Erraten der Größe von Zahlen in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

vue.js angular JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：React+Native+Video erzeugt einen VollbildeffektNächster Artikel：React+Native+Video erzeugt einen Vollbildeffekt

In Verbindung stehende Artikel

Mehr sehen