11.1 随机抽奖
效果
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖游戏</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="lottery">
<div ng-controller="ctrl_lottery" id="lottery">
<!--step1 首页-->
<div id="step1">
<a class="start" ng-click=start()>开始</a>
</div>
<!--step2 抽奖列表-->
<div id="step2" class="hide">
<div ng-repeat="item in items" id="{{item.id}}" class="item" ng-class="{'active':item.status}">
<!--item的status为true时，添加class为active-->
{{item.name}}
</div>
</div>
<!--step3 显示结果页-->
<div id="step3" class="hide top">
<a href="javascript:;" ng-click="reset()" class="reset">重新开始</a>
<a href="javascript:;" ng-click="edit()" class="edit">修改奖品</a>
<button class="active">{{result}}</button>
</div>
<!--step4 添加修改奖品列表-->
<div id="step4" class="hide top">
<a href="javascript:;" ng-click="return()" class="reset">返回</a>
<form action="">
<input type="text" ng-model="name" required placeholder="名称">
<!-- <input type="text" class="btn" type="submit" value="添加"> -->
<a href="javascript:;" ng-click="add()">添加</a>
</form>
<ul>
<li ng-repeat="item in items">
<span>{{item.id}}</span>
<span class="span">{{item.name}}</span>
<a href="javascript:;" ng-click="del(item.id)">删除</a>
</li>
</ul>
</div>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
JS
angular.module("lottery",[])
.controller('ctrl_lottery',['$scope','$timeout',function($scope,$timeout){
//1.初始化奖品数据
$scope.items = [
{id:1,name:"欧洲豪华游",status:0},
{id:2,name:"Mac台式电脑",status:0},
{id:3,name:"IPhone6手机",status:0},
{id:4,name:"时尚山地车",status:0},
{id:5,name:"高清数字电视",status:0},
{id:6,name:"100元话费",status:0}
];
$scope.result = "奖品为空";
$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";
}
//开始抽奖
$scope.start = function(){
$scope.showhide(1,2); //step1隐藏 step2显示
var circle = 5;
var selkey = Math.floor(Math.random()*$scope.items.length);
var next = function(key){
$scope.items[key].status = true; //该奖品显示active状态 ng-class="{'active':item.status}"
if((key-1)>=0){
$scope.items[key-1].status = false; //前一个奖品removeClass active
}
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); //循环调用next() 下一个奖品active
}else{
next(0); //一圈结束，从头开始
}
}, 100);
}
next(0); //首次执行next()
}
//显示奖品时
$scope.reset = function(){
$scope.showhide(3,1); //隐藏 step3 显示step1
}
$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; //最后一个元素id加1
}
}])
CSS
body{
font-size: 12px;
}
a:link,a:visited{
text-decoration: none;
}
#lottery{
margin:0 auto;
border:1px solid #ccc;
width: 306px;
text-align: center;
}
#lottery .hide{
display: none;
}
#lottery .show{
display: block;
}
#lottery .top{
margin-top:10px;
}
#lottery ul{
list-style: none;
padding: 0;
margin: 20px 0;
}
#lottery ul li{
border-bottom: 1px dashed #ccc;
}
#lottery ul li span{
float: left;
padding-left: 10px;
}
#lottery ul li .span{
width: 230px;
}
#lottery button{
margin: 50px 0;
width: 100px;
height: 100px;
}
#lottery .start{
display: block;
width: 100px;
height:50px;
line-height: 50px;
font-size: 24px;
margin: 50px auto;
text-align: center;
border-radius: 5px;
background: #ec971f;
border: 1px solid #d58512;
box-shadow: inset 0 -4px 0 #ec971f;
color: #fff;
}
#lottery .item{ /*奖品*/
width: 100px;
height: 100px;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
float: left;
}
#lottery .active{ /*选中的奖品*/
background: #ec971f;
border: 1px solid #d58512;
border: 1px solid #ccc;
color: #fff;
}
#lottery .reset{
float: left;
padding-left: 10px;
}
#lottery .edit{
float: right;
padding-right: 10px;
}