基于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);
}