recherche

Maison >interface Web >js tutoriel >Méthode d'implémentation de la fonction de nombre de devinettes Angularjs

Méthode d'implémentation de la fonction de nombre de devinettes Angularjs

小云云
小云云original
2018-02-06 09:08:161234parcourir

Cet article présente principalement à tout le monde la fonction de deviner la taille des nombres dans angulaire. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. 


<body ng-app="myapp" ng-controller="myCtrl">
 <h2>猜一猜，多大值？（1-1000）</h2>
 我猜是:<input type="text" ng-model="guess">
 <button ng-click="check()">验证</button><button ng-click="reset()">再玩一次</button><br>
 <span ng-if="fil>0">您猜的数大了</span>
 <span ng-if="fil<0">您猜的数小了</span>
 <span ng-if="fil==0">您猜对了</span>
 <p>猜的次数<span>{{n}}</span></p>
</body>

Code js : 


<script src="angular.min.js"></script>
 <script>
  var myapp=angular.module("myapp",[]);
  myapp.controller("myCtrl",function ($scope) {
　　　　　　//验证
   $scope.check=function () {
    console.log($scope.random);　//根据差值判断显示、隐藏状态
    $scope.fil=$scope.guess-$scope.random;
    $scope.n++;

   };　　　　　　　　　　//重置方法
   $scope.reset=function () {
    $scope.guess=null;
    $scope.fil=null;
    $scope.n = 0;　　　　　　　　　　　//得到随机数
    $scope.random=Math.ceil(Math.random()*1000);
   };
   $scope.reset();
  })



 </script>

Recommandations associées :

Exemple détaillé d'implémentation d'un jeu de devinettes basé sur des composants vue

Implémentation JavaScript d'un exemple de code de jeu de devinettes

Une simple devinette programme, parfois il fonctionne correctement, mais parfois les résultats sont faux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé des compétences de développement EasyUI pour jQueryArticle suivant：Résumé des compétences de développement EasyUI pour jQuery

Articles Liés

Voir plus