频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
angular猜数案例
2017-09-13 09:34:00      个评论    来源:qq_39716839的博客  
收藏   我要投稿

angular猜数案例

 	<!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;
 	}
 	p{
 	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>
 	<p>猜一猜,多大值?(1-10)</p><br/>
 	<input type="text" 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>一共猜了<spanng-bind="num"></span>次</p>
 	</center>
 	</body>
 	 
 	</html>

 

点击复制链接 与好友分享!回本站首页
上一篇:git如何配置ssh
下一篇:web.xml的使用实例
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站