AngularJS implementiert das Ratespiel mit Zahlen-js-Tutorial-php.cn

AngularJS implementiert das Ratespiel mit Zahlen

php中世界最好的语言

Freigeben： 2018-04-13 14:43:14

Original

1872 Leute haben es durchsucht

Dieses Mal werde ich Ihnen AngularJS zur Implementierung des Zahlen-Ratespiels vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung des Zahlen-Ratespiels mit AngularJS? Das Folgende ist ein praktischer Fall .

<!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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

AngularJS implementiert die Preisberechnungsfunktion

Detaillierte Erläuterung der Konfigurationsschritte für die Verpackung von Vue-Vorlagendateien

Detaillierte Erläuterung der Verwendung von Vue-Filtern

Das obige ist der detaillierte Inhalt vonAngularJS implementiert das Ratespiel mit Zahlen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!