Heim > Artikel > Web-Frontend > AngularJS implementiert das Ratespiel mit Zahlen

AngularJS implementiert das Ratespiel mit Zahlen

php中世界最好的语言Original: 2018-04-13 14:43:141868Durchsuche

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>

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!

php

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：Vue implementiert den TastatureffektNächster Artikel：Vue implementiert den Tastatureffekt

In Verbindung stehende Artikel

Mehr sehen