angularjs 猜数

最新推荐文章于 2024-08-05 17:47:14 发布

dreamflylb

最新推荐文章于 2024-08-05 17:47:14 发布

阅读量172

点赞数

分类专栏：混合开发

本文链接：https://blog.csdn.net/dreamflylb/article/details/78243220

版权

混合开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

</html>