之前自己就學了點AnjularJS，都是在菜鳥教程裡面將基礎的只是大致過了一遍，沒怎麼自己動手做什麼東西練練手，但還是覺得紙上得來終覺淺，得知此事要躬行啊，今天就做了個猜數字的小游戲，覺得效果還不錯，心情也大好，看來還是得多練啊。好了，廢話少說，還是說說效果怎麼實現的吧。 既然是AnjularLS項 ...
之前自己就學了點AnjularJS，都是在菜鳥教程裡面將基礎的只是大致過了一遍，沒怎麼自己動手做什麼東西練練手，但還是覺得紙上得來終覺淺，得知此事要躬行啊，今天就做了個猜數字的小游戲，覺得效果還不錯，心情也大好，看來還是得多練啊。好了，廢話少說，還是說說效果怎麼實現的吧。
既然是AnjularLS項目首先要引入AnjularJS文件
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
我們都知道腳本一般都在body底部引入，但是在AnjularJS的項目中將AnjularJS腳本文件放在head部分，因為document要引用AnjularJS裡面的內容
那我們再來說說游戲規則
電腦隨機產生一個數字，與你輸入的數字比較，如果你輸入的數字大於電腦產生的數字，則提示輸入的數字偏大，如果偏小則提示偏小，相等則猜對了。並記錄你猜了多少次。
再來分析分析總共幾個變數
1、orignNumber 電腦隨機產生的數字
2、value 你輸入的數字
3、count 猜的次數
4、bj（比較）你猜的數字與電腦產生的數字的比較
下麵是html代碼
<div>
<h3>猜數字</h3>
<p>請猜出電腦生成的隨機數，它的範圍在0-10之間</p>
<input type="text" ng-model="value">
<button ng-click="guess()">確定</button><button ng-click="again()">重來</button>
<p ng-show='bj>0'>猜的數字偏大</p>
<p ng-show='bj<0'>猜的數字偏小</p>
<p ng-show='bj==0'>哈哈，恭喜你猜對了！</p>
<p>您總共猜了{{count}}次</p>
</div>
下麵是AnjularJS文件
var app=angular.module('myApp',[]);
app.controller('ctr',function($scope){
$scope.count=0;
$scope.value=null;
$scope.orignNumber=Math.floor(Math.random()*100)+1;
$scope.guess=function(){
$scope.count++;
// 比較
$scope.bj=$scope.value-$scope.orignNumber;
}
$scope.again=function(){
$scope.count=0;
$scope.value=null;
$scope.orignNumber=Math.floor(Math.random()*100)+1;
$scope.bj=null;
}
})
下麵看看效果截圖
