angularjs 是一個用來開發單頁webAPP的mvv框架，由Google 開發，如果不知道angularjs 的可以先google 下
按照angularjs 的開發一般順序先搭建好需要做的視圖，然後準備數據，最後綁定事件處理業務邏輯，操作DOM事件用戶和程序的交互。
1、開始搭建界面，使用bootstrap作爲UI框架，可以快速搭建清爽的界面效果，順便引入 angular.js jquery.js 和我們需要寫的app.js 作爲業務邏輯
1 <!doctype html> 2 <html ng-app="lottery"> 3 <head> 4 <meta charset="utf-8"> 5 <title>中午喫什嘛!</title> 6 <meta name="fragment" content="!"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta name="description" content=""> 9 <meta name="viewport" content="width=device-width"> 10 11 <link rel="stylesheet" type="text/css" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css"> 12 13 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/250/osagsqji/angular.js"></script> 14 <script type="text/javascript" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script> 15 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/250/osagsqji/app.js"></script> 16 17 <style type="text/css"> 18 td span{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border:1px solid #ccc;cursor: pointer;} 19 .red{color:red;} 20 .view{height:300px;border:1px solid #ccc;} 21 .buffer{background: url(http://dev.haowa.com/img/ajax_loader.gif) center center no-repeat;} 22 .ground{width:400px;} 23 .ground .one{width:100px;height:100px;float:left;margin:5px;border:1px solid #ccc;text-align:center;text-align:center;line-height:100px;} 24 .ground .one.active{background:#357ebd;border:1px solid #A2FF9C;color:#fff;} 25 .result{color:#f60;} 26 </style> 27 28 </head> 29 <body buffer> 30 <p></p> 31 <div class="container" ng-controller="main"> 32 <div class="row-fluid" > 33 <div class="span6"> 34 <h3 class="result">獲取結果:{{result}}</h3> 35 <h5>添加選項</h5> 36 <form ng-submit="add()"> 37 <input type="text" ng-model="value" required size="30" placeholder="名稱"> 38 <input class="btn" type="submit" value="添加到預選列表"> 39 </form> 40 <!-- 列表 --> 41 <ul> 42 <li ng-repeat="one in data"> 43 <span>{{one.id}}</span> 44 <input value="{{one.name}}" style="border:1px solid #fff" size="30"> 45 <a ng-click="del(one.id)">刪除</a> 46 </li> 47 </ul> 48 </div> 49 <div class="span6"> 50 51 <button class="btn" ng-click="start()" ngDisabled="is_start">開始計算</button> 52 <p></p> 53 <div class="ground"> 54 <div ng-repeat="one in data" id="{{one.id}}" class="one" ng-class="{'active':one.status}" >{{one.name}}</div> 55 </div> 56 </div> 57 </div> 58 </div> 59 </body> 60 </html>
開始寫app.js
"use strict" var app = angular.module("lottery",[]); app.controller('main', ['$scope','$timeout', function($scope,$timeout){ $scope.data = [ {id:1,name:"火鍋",status:0}, {id:2,name:"中餐",status:0}, {id:3,name:"泰國菜",status:0}, {id:4,name:"韓國料理",status:0} ]; $scope.is_start = false; $scope.result = "還沒有開始!"; /** * 添加 * @author ln */ $scope.add = function () { var last_id = getLastId(); $scope.data.push({id:last_id,name:$scope.value,status:0}) } /** * 刪除 * @author ln */ $scope.del = function (id) { angular.forEach($scope.data,function(value, key) { if (id == value.id) { $scope.data.splice(key,1); }; }) } $scope.start = function() { if ($scope.is_start) alert("已經開始了！！"); $scope.is_start = true; var queue = []; //滾動隊列 var circle = 3; var select_key = 0; //中獎的KEY //隨機 select_key = Math.floor(Math.random()*$scope.data.length); //滾動 var next = function(key) { $scope.data[key].status = true; if ((key-1)>=0) $scope.data[key-1].status = false; if (key==0) $scope.data[$scope.data.length-1].status = false; var timer = $timeout(function() { // //結束 if (circle <=0 && select_key == key) { alert("搞定,答案是:"+$scope.data[key].name); $scope.result = $scope.data[key].name; $scope.is_start = false; return; }; // //減少一圈 if ($scope.data.length == key+1){ circle--; } if ($scope.data[key+1]) { next(key+1) }else{ next(0) } },100); } next(0); } /******私有方法 ***********/ function getLastId() { var id = 0; angular.forEach($scope.data,function(value, key) { if (id < value.id) id = value.id }) return ++id; } }]);
這裏數據
$scope.data = [
{id:1,name:"火鍋",status:0},
{id:2,name:"中餐",status:0},
{id:3,name:"泰國菜",status:0},
{id:4,name:"韓國料理",status:0}
];
作爲默認數據，根據 add del 方法實現增加、刪除功能
最後關鍵的開始的滾動抽獎邏輯由 start 方法實現
1 $scope.start = function() { 2 if ($scope.is_start) 3 alert("已經開始了！！"); 4 5 $scope.is_start = true; 6 var queue = []; //滾動隊列 7 var circle = 3; 8 var select_key = 0; //中獎的KEY 9 10 //隨機 11 select_key = Math.floor(Math.random()*$scope.data.length); 12 13 //滾動 14 var next = function(key) { 15 $scope.data[key].status = true; 16 if ((key-1)>=0) 17 $scope.data[key-1].status = false; 18 if (key==0) 19 $scope.data[$scope.data.length-1].status = false; 20 21 var timer = $timeout(function() { 22 // //結束 23 if (circle <=0 && select_key == key) { 24 alert("搞定,答案是:"+$scope.data[key].name); 25 $scope.result = $scope.data[key].name; 26 $scope.is_start = false; 27 28 return; 29 }; 30 // //減少一圈 31 if ($scope.data.length == key+1){ 32 circle--; 33 } 34 if ($scope.data[key+1]) { 35 next(key+1) 36 }else{ 37 next(0) 38 } 39 },100); 40 } 41 next(0); 42 }