基于angularJS的抽奖单页实践

前言：之前笼统的学习了angular框架，纸上得来终觉浅，这次自己独立完成了一个简单的抽奖单页。也算是给自己前面的学习一个总结和交代。

界面效果：

业务流程：
首先用户在首页点击抽奖按钮，进入抽奖界面，红色砖块将会快速随机跳动，最终停在某一个奖品之上，即刻进入抽奖结果页面。

核心代码：

初始化奖品

$scope.items = [{id:1,name:"IPhone7",status:0},{id:2,name:"现金5000元",status:0},{id:3,name:"美的电冰箱",status:0},{id:4,name:"美的微波炉",status:0},{id:5,name:"床上四件套",status:0},{id:6,name:"充电宝",status:0},{id:7,name:"保温杯",status:0},{id:8,name:"苹果耳机",status:0},{id:9,name:"50元话费",status:0}
 ];

其中status用于判断当前奖品是否显示被抽中，下面会再提到（当status为1时显示为红色砖块）

构造一个类似Jquery的选择函数

$scope.$$ = function(id){return document.getElementById(id);
 }

隐藏前一个页面显示下一个页面

$scope.showhide = function(pre,next){pre = "step"+pre;next = "step"+next;$scope.$$(pre).style.display = "none";$scope.$$(next).style.display = "block";
 }

抽奖思路

1. 点击抽奖按钮之后，当前页面隐藏，抽奖页面显示，即先调用函数showhide（1,2）
2. 自定义闪动圈数var circle = 6;
3. 声明随机中奖号码
   var luckyKey = Math.floor(Math.random()*$scope.items.length)
4. 循环闪动函数next(0)开始调用

 var next = function(key){$scope.items[key].status = true; if((key-1)>=0){$scope.items[key-1].status = false;}if(key==0){$scope.items[$scope.items.length-1].status = false;}var timer = $timeout(function() {if(circle <= 0 && luckyKey == key){$scope.showhide(2,3); $scope.result = $scope.items[key].name;return;}if($scope.items.length == key+1){circle--; }if($scope.items[key+1]){next(key+1);}else{next(0);}}, 100);
 }