采用AngularJS 模仿抽奖实例简单实现【Study笔记】
//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 }
