AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能示例

2019-11-19 14:39:04

字體：大中小

供稿：網(wǎng)友

本文實例講述了AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>m.survivalescaperooms.com Angular猜數(shù)</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的整數(shù)</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>

運行效果：