AngularJS实现的生成随机数与猜数字大小功能示例

2019-11-19 14:39:04

字体：大中小

来源：转载

供稿：网友

本文实例讲述了AngularJS实现的生成随机数与猜数字大小功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.VeVB.COm 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>

运行效果：