So implementieren Sie die Funktion zum Erraten der Größe von Zahlen in AngularJS-js-Tutorial-php.cn

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

亚连

Freigeben： 2018-06-15 15:14:36

Original

1303 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!