采用AngularJS 模仿抽奖实例简单实现【Study笔记】

最新推荐文章于 2020-06-09 10:56:23 发布

weixin_30752699

最新推荐文章于 2020-06-09 10:56:23 发布

阅读量86

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Hizy/p/6844053.html

版权

//TODO Demo说明等等

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

效果展示：

Demo代码：

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="lottery">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>抽奖</title>
 9     <script src="../libs/Angular.js" type="text/javascript"></script>
10     <link rel="stylesheet" type="" href="../Demo/style.css">
11 </head>
12 
13 <body>
14     <div ng-controller="ctrl_lottery" id="lottery">
15         <div id="step1">
16             <button type="" ng-click="start()">开始</button>
17         </div>
18         <div id="step2" class="hide">
19             <div ng-repeat="item in items" id="{{item.id}}" class="item" ng-class="{'active':item.status}">
20                 {{item.name}}
21             </div>
22         </div>
23         <div id="step3" class="hide top">
24             <a href="javascipt:void(0)" ng-click="reset()" class="reset">
25                 <span>重新开始</span>
26             </a>
27             <a href="javascipt:void(0)" ng-click="reset()" class="reset">
28                 <span>修改奖品</span>
29             </a>
30             <button class="active">{{result}}</button>
31         </div>
32         <div id="step4" class="hide top">
33             <a href="javascript:void(0)" ng-click="return()" class="reset">
34                 <span>返回</span>
35             </a>
36             <form ng-submit="add()">
37                 <input type="text" ng-model="name" required placeholder="名称">
38                 <input type="submit" class="btn" value="添加">
39             </form>
40             <ul>
41                 <li ng-repeat="item in items">
42                     <span>{{item.id}}</span>
43                     <span>{{item.name}}</span>
44                     <a href="javascript:void(0)" ng-click="del(item.id)">删除</a>
45                 </li>
46             </ul>
47         </div>
48     </div>
49     <script src="../Demo/app.js"></script>
50 </body>
51 
52 </html>

//构建抽奖页面相关JS

angular.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 }