angular猜1-10的随机数

最新推荐文章于 2020-04-09 11:42:04 发布

zhuc666

最新推荐文章于 2020-04-09 11:42:04 发布

阅读量296

点赞数

本文链接：https://blog.csdn.net/zhuc666/article/details/78242494

版权

	<!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>