猜数字游戏

最新推荐文章于 2022-07-21 20:51:59 发布

scvas

最新推荐文章于 2022-07-21 20:51:59 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/wuzhanbin/article/details/77916102

版权

html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

猜数字，彭帅哥

用HBuilder工具编写的

<!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="text" 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>一共猜了<span ng-bind="num"></span>次</p>
       </center>
   </body>

</html>