最近接到一個客戶的要求,他作了一個微信現場報名系統,現場報名的人經過微信,把信息入庫,而後在活動現場搞抽獎活動,點一下「開始抽獎」,屏幕上的微信頭像開始高速滾動,點「中止」,中獎結果處顯示4名中獎者,中獎者是隨機從數據庫中讀出的中獎人,中獎人數能夠在代碼中設,能夠是1我的或是多我的,代碼簡單,利用jquery配合asp實現的asp活動抽獎,不說了,上代碼:javascript
asp現場活動抽獎代碼+jquery微信現場活動抽獎代碼:css
<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>