最近接到一个客户的要求,他做了一个微信现场报名系统,现场报名的人通过微信,把信息入库,然后在活动现场搞抽奖活动,点一下“开始抽奖”,屏幕上的微信头像开始高速滚动,点“停止”,中奖结果处显示4名中奖者,中奖者是随机从数据库中读出的中奖人,中奖人数可以在代码中设,可以是1个人或是多个人,代码简单,利用jquery配合asp实现的asp活动抽奖,不说了,上代码:
asp现场活动抽奖代码+jquery微信现场活动抽奖代码:
<body>
<div class="main">
<div class="box">
<div class="boximg"></div>
<div class="boximg1"></div>
</div>
<div class="jz">
<button class="startbtn">开始抽奖</button>
<button class="stopbtn">停止</button>
</div>
<div>
<h1>中奖结果</h1>
<div class="result">
</div>
</div>
</div>
<script type="text/javascript" src="http://ly.ftphn.com/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(".boximg").html('<div class="img"><img src="'+ list[0].img +'"><span>'+ list[0].name +'</span></div>')
var zj_count = 4;//中奖人数
var index;
var speed=100;//每次移动多少像素
var endtime = 1;//定时器的速度
$(".startbtn").click(function(){
$(this).hide();
$(".stopbtn").show();
$(".boximg").html('')
console.log(list.length);
if(list.length<3){
alert("抽奖人数至少3位");
$(".stopbtn").hide();
return;
}
var i = 0;
var box = $(".boximg");
box.append(box.find(".img").eq(0).clone());
index = setInterval(function(){
var top = speed * i;
if(top<=list.length*200){
box.css({'top':-top+'px'})
i++;
}else{
i = 0;
}
if(speed<=8 && i<=60 && top % (list.length-1)*200 ==0){
speed++;
console.log(speed)
}
},endtime)
})
$(".stopbtn").click(function(){
speed = 4;
$(this).hide();
$(".startbtn").show();
$(".boximg").hide();
$(".boximg1").show();
clearInterval(index);
for(var j=0;j<zj_count;j++){
num = Math.round(Math.random()*(list.length-1));
$(".boximg1").html('<div class="img"><img src="'+ list[num].img +'"><span>'+ list[num].name +'</span></div>');
$(".result").append('<p><img src="'+ list[num].img +'"> '+ list[num].name +'<br>'+ list[num].mobile +'</p>')
list.splice(num,1);
}
})
</script>