angularjs猜数字游戏

最新推荐文章于 2022-08-19 18:14:33 发布

葛村野人

最新推荐文章于 2022-08-19 18:14:33 发布

阅读量275

点赞数

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

</html>