Detailed explanation of the size guessing function in angularjs-JS Tutorial-php.cn

Detailed explanation of the size guessing function in angularjs

小云云

Release： 2018-01-04 09:45:59

Original

1534 people have browsed it

This article mainly introduces the size guessing function of angularjs in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The example in this article shares the specific code for guessing the size of numbers in angular.js for your reference. The specific content is as follows

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>猜大小</title>
 <script src="angular-1.5.5/angular.min.js"></script>
 <style>
  *{
   margin:0;
   padding:0;
   font-size: 30px;
  }
  input{
   width: 500px;
   height: 50px;
  }
  button{
   width: 80px;
   height: 50px;
   border: 0;
   text-align: center;
   line-height: 50px;
   color: white;
   margin-left: 5px;
  }
 </style>
 <script>
  var m=angular.module("m",[]);
  m.controller("my",function ($scope) {
   $scope.check=function () {
    $scope.differ=$scope.guess-$scope.random;
    $scope.num++;
   }
   $scope.reset=function () {
    $scope.guess=null;
    $scope.differ=null;
    $scope.num=0;
    $scope.random=Math.ceil(Math.random()*10);
   }
   $scope.reset();
  })
 </script>
</head>
<body ng-app="m" ng-controller="my">
<h1>请输入一个1-10的整数</h1>
 <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">0</span>次</p>
</body>
</html>

Copy after login

Related recommendations:

Detailed explanation of the weather forecast function in angularjs

AngularJS fuzzy query function implementation code

AngularJS implementation of the input box Word limit reminder function

The above is the detailed content of Detailed explanation of the size guessing function in angularjs. For more information, please follow other related articles on the PHP Chinese website!