AngularJs 猜大小游戏简单实现

最新推荐文章于 2025-03-17 17:58:34 发布

春风十里桃花开

最新推荐文章于 2025-03-17 17:58:34 发布

阅读量518

点赞数

分类专栏：混合开发文章标签： AngularJs

本文链接：https://blog.youkuaiyun.com/wanleiSuper/article/details/78296547

版权

混合开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用Angular 1.5.5实现的简单猜数字游戏。游戏会随机生成一个1到10之间的数字，玩家输入猜测的数字进行验证。根据提示调整下一次猜测，直至猜中为止。该应用展示了Angular的基本用法，包括控制器、作用域变量及指令的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function($scope){
            //$scope.guess="10";

          /*  $scope.count=0;
            $scope.differ=null;
            $scope.random=parseInt(Math.random()*10);
            $scope.guess=null;*/

            //验证结果
            $scope.check=function(){
                //console.log($scope.random);
                $scope.differ=$scope.guess-$scope.random;
                $scope.count++;
            };
            //初始化游戏
            $scope.again=function(){
                $scope.count=0;
                $scope.differ=null;
                $scope.random=parseInt(Math.random()*10);
                $scope.guess=null;
            };
            
            $scope.again();
        })
    </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="again()">再来一次</button>
    <p ng-show="differ>0">猜大了</p>
    <p ng-show="differ<0">猜小了</p>
    <p ng-show="differ==0">猜对了</p>
    <p>你一共猜了<span ng-bind="count"></span>次</p>
</body>
</html>