//TODO Demo说明等等

 

 

---------------------------------------------------------------------------------------------------------

效果展示：

 

Demo代码：

1  2  3  4  5     
      6     
      7     
      8      9     10     
     11 12 13 14     
     
      15         
      
       16             
       开始17         
      
18         
      
       19             
       
        20                 {
    {item.name}}21             
       
22         
      
23         
      
       24             
       25                 重新开始26             27             
       28                 修改奖品29             30             
       {
   {result}}31         
      
32         
      
       33             
       34                 返回35             36             
       
        37                 
        38                 
        39             
       
40             
       
        41                 
        
42                     {
   {item.id}}43                     {
   {item.name}}44                     删除45                 
46             
       
47         
      
48     
     
49     50 51 52 

//构建抽奖页面相关JSangular.module("lottery", [])    .controller('ctrl_lottery', function ($scope, $timeout) {        //初始化奖品数据        $scope.items = [{                id: 1,                name: "A1",                status: 0            },            {                id: 2,                name: "A2",                status: 0            },            {                id: 3,                name: "A3",                status: 0            },            {                id: 4,                name: "A4",                status: 0            },            {                id: 5,                name: "A5",                status: 0            },            {                id: 6,                name: "A6",                status: 0            }        ];        $scope.result = "奖品为空";        $scope.$$ = function (id) {            return document.getElementById(id);        };        $scope.showhide = function (pre, nex) {            pre = "step" + pre;            nex = "step" + nex;            $scope.$$(pre).style.display = "none";            $scope.$$(nex).style.display = "block";        };        //开始抽奖时绑定的方法        $scope.start = function () {            $scope.showhide(1, 2);            var circle = 5;            var selkey = Math.floor(Math.random() * $scope.items.length);            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 && selkey == 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);            };            next(0);        };        //显示奖品时绑定的方法        $scope.reset = function () {            $scope.showhide(3, 1);        };        $scope.edit = function () {            $scope.showhide(3, 4);        };        //修改奖品时绑定的方法        $scope.add = function () {            var last_id = lastid();            $scope.items.push({                id: last_id,                name: $scope.name,                status: 0            })        }        $scope.del = function (id) {            angular.forEach($scope.items, function (value, key) {                if (id == value.id) {                    $scope.items.splice(key, 1);                };            })        }        //        $scope.return = function () {            $scope.showhide(4, 3);        }        //内部函数，用于获取最后一项数据的ID号值        function lastid() {            var id = 0;            angular.forEach($scope.items, function (value, key) {                if (id < value.id) id = value.id;            });            return ++id;        }    });

1 body { 2     font-size: 13px; 3 } 4  5 a:link { 6     text-decoration: none; 7 } 8  9 a:visited {10     text-decoration: none;11 }12 13 #lottery {14     margin: 0 auto;15     border: solid 1px #ccc;16     width: 300px;17     text-align: center;18 }19 20 #lottery ul {21     list-style-type: none;22     padding: 0px;23     margin: 20px 0px;24     text-align: left;25 }26 27 #lottery ul li {28     border-bottom: 1px dashed #ccc;29     padding: 5px 0px;30 }31 32 #lottery ul li span {33     float: left;34     padding-left: 10px;35 }36 37 #lottery button {38     margin: 50px 0px;39     width: 100px;40     height: 100px;41 }42 43 #lottery .item {44     width: 100px;45     height: 100px;46     border: 1px solid #ccc;47     text-align: center;48     line-height: 100px;49     float: left;50 }51 52 #lottery .active {53     background-color: #666;54     border: 1px solid #ccc;55     color: #fff;56 }57 58 #lottery .reset {59     float: left;60     padding-left: 10px;61 }62 63 #lottery .edit {64     float: right;65     padding-right: 10px;66 }67 68 #lottery .top {69     margin-top: 10px;70 }71 72 #lottery .show {73     display: block;74 }75 76 #lottery .hide {77     display: none;78 }