angularjs+生成随机数猜数字大小

最新推荐文章于 2021-01-30 23:12:46 发布

敲代码也要浪的飞起

最新推荐文章于 2021-01-30 23:12:46 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/weifengdada/article/details/78231930

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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的整数</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>