最近这两天看文档，慢慢觉得angulrJSq其实就纠正之前原生js的思路，今天做了小特效，从早上六点起来，开始研究这个特效，到现在才能自己独立写出了
需求分析：
1.点击开始按钮后，所有的奖牌以块状不断闪烁5次
2.等闪烁结束后，自动显示所抽中的奖品名次进入第三个页面－－显示中奖名次
3.进入第三个页面中游两个设置：重新开始和修改奖品
4.点击修改奖品页面后，可以自定义奖品内容，包括删除原有奖品和增进新的奖品。
body,div,ul,li,a,span,img{ padding: 0; margin: 0; font-family: "微软雅黑";}
li{ list-style: none;}
a{ text-decoration: none;}
button{border: none; outline: none;}
.lotery{border:4px solid #ffcc33; width:400px; margin: 30px auto;/* text-align: center;*/}
/*===初始化页面*/
.step1{ width: 100%; height: 300px; text-align: center; line-height: 300px; }
.step1 button{ width: 100px; height: 100px; border-radius: 50%; font-size: 1.4rem;}
/*=====end====*/
.step2{ overflow: hidden;}
.lotery .item{ width: 131px; height:131px; text-align: center; line-height:131px; font-size: 18px; float: left; border: 1px solid #f80;}
.active{ box-shadow: 1px 3px 3px rgba(50,50,50,.4); color: #f00; font-weight: 600;}
.hide{ display: none; transition:all 0.2s linear;}
.show{ display: block; transition:all 0.3s linear;}
/*=====step3===*/
.step3{height: 300px; line-height: 300px; text-align: center;}
.step3 p{ overflow: hidden;}
.step3 p .reset,p .edit{ width: 80px; text-align: center; height: 40px; line-height: 40px; font-size: 16px; background-color: #f00; color: #fff; border-radius:10px;}
.step3 p .reset{ float: left;}
.step3 p .edit{ float: right;}
.step3 button{width: 131px; height: 131px; text-align: center; line-height: 131px; font-size: 16px;}
/*===step4===*/
.step4 .wrap{ overflow: hidden; border-bottom: 1px solid #ddd;}
.step4 .reset{ width: 60px; height: 30px; text-align: center; line-height: 30px; font-size: 14px; border-radius: 5px; float: left; border: 1px solid #ccc; background-color: #f00;}
form{display: inline;}
form input[type="text"]{ width: 250px; height:26px;outline: none; border: none; padding-left: 20px;}
.btn{ width: 62px; text-align: center; height:31px;border: none; outline: none; border-radius: 5px; background-color: #f00; font-weight: 600;}
ul li{ border-bottom: 1px dashed #ddd; height: 40px; line-height: 40px; margin:0 20px;}
ul li span{ width: 155px; display: inline-block;}
ul li .names{ text-align: left;}
ul li a{ display: inline-block; text-align: right;}
var a=angular.module('myapp',[]);
a.controller('LoteryController',['$scope','$timeout',function($scope,$timeout){
$scope.items=[
{id:1,name:'欧洲豪华游',status:0},
{id:2,name:'Mac太帅电脑',status:0},
{id:3,name:'iphone手机',status:0},
{id:4,name:'时尚山地车',status:0},
{id:5,name:'高清数字电视',status:0},
{id:6,name:'500元充值卡',status:0}
];
$scope.result="奖品为空";
$scope.$=function(id){
return document.getElementById(id);
}
$scope.showhide=function(pre,nxt){
var pre="step"+pre;
var nxt='step'+nxt;
$scope.$(pre).style.display="none";
$scope.$(nxt).style.display="block";
};
//开始抽奖时绑定的方法
$scope.start=function(){
$scope.showhide(1,2);
var circle=5;
var selkey=Math.floor(Math.random()*$scope.items.length);
console.log(selkey);
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(id){
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);
}
function lastid(){
var id=0;
angular.forEach($scope.items,function(value,key){
if(id
id=value.id;
}
})
return ++id;
}
}]);
网友评论