angular猜1-10的随机数

来源：互联网发布：2016年6月我国域名总数编辑：程序博客网时间：2024/06/05 05:05

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; font-size: 30px; } input { width: 400px; height: 40px; font-size: 30px; } button { width: 80px; height: 50px; border: 0; text-align: center; line-height: 50px; background: darkblue; color: #fff; margin-left: 5px; } .check{ background-color: #aaf; } .reset{ background-color: #afa; } div{ width: 500px; height: 50px; background-color: #aaa; } </style> <script src="js/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"> <center> <h2>猜数游戏</h2> <div>猜一猜，多大值？（1-10）</div><br/> <input type="number" ng-model="guess"> <button ng-click="check()" class="check">检查</button> <button ng-click="reset()" class="reset">重玩一次</button><br/><br/> <p ng-if="differ>0">猜大了</p> <p ng-if="differ<0">猜小了</p> <p ng-if="differ==0">猜对了</p> <p>一共猜了<spanng-bind="num"></span>次</p> </center> </body> </html>

阅读全文

0 0