JS+CSS写的类似转盘的抽奖程序

来源：互联网发布：数据库服务器是什么编辑：程序博客网时间：2024/05/17 22:53

今天需要用个抽奖程序，网上大部分是flash的，想用需付款，一怒之下了这个精简版类似转盘的抽奖程序。

这是简单0-8个奖品页面，0-8即每个奖品，改的时候只需要自己把他们换成不同的样式就OK了。基本可以满足需求，如果有bug或漏洞，欢迎指正！

<html><head><style type="text/css">.cur{color:red;font-weight:700;font-size:30px;}<!--选中状态--></style></head><body><span onclick="getAward();">go</span><!--点击开始抽奖--><span onclick="stopAward();">stop</span><br/><!--点击停止抽奖--><span id="a0" class="cur">0</span><br/><span id="a1">1</span><br/><span id="a2">2</span><br/><span id="a3">3</span><br/><span id="a4">4</span><br/><span id="a5">5</span><br/><span id="a6">6</span><br/><span id="a7">7</span><br/><span id="a8">8</span><br/></body><script src="jquery-1.6.3.min.js"></script><script src="award.js"></script></html>

一下是award.js文件

<script type="text/javascript">var start = 0;//第一个奖品代号0var end = 8;//最后一个奖品代后是8var cur = 0;//当前被选中（高亮）的奖品var distance = 0;//从后台得到中奖代后滚动过的格数var time = 300;//没0.3秒转盘滚动一格var go;//声明用来让转盘滚动的定时器var stop = -1;//应该停下来的奖品代码，默认为-1，即开始无奖品var getAward = function() {clearInterval(go);        //清除定时器，防止多次开始按钮造成混乱go = setInterval("change()", time);//每隔time毫秒换一个格子};var change = function() {if(stop == cur && distance > 5) {//判断中奖代后与当前是否一致，且滚动格数是否大于5步（为了让转盘多滚动几下，避免马上停下）showAward(stop);//如果中奖，则提示用户，停止抽奖程序return;}$("#a"+cur).removeClass("cur");//把当前奖品设置为常态if(cur == 8) {$("#a"+start).addClass("cur");//把第一个奖品设置为高亮cur=0;//让cur指向第一个奖品}else { $("#a"+(cur+1)).addClass("cur");//把下一个奖品设置为高亮cur++;//让cur指向下一个奖品} (stop >= 0) && (time = time+100);//如果stop>=0，即受到中奖信息后，把定时器时间加长，目的是让转盘越转越慢(stop >= 0) && distance++;//中奖后，每滚动一次给distance加1，可以让转盘多滚几下，不至于马上停止clearInterval(go); getAward();};var stopAward = function(award) {//后台获取中奖代号awardstop = award;//把中奖信息传递给stop}var showAward = function(award) {alert(award);//提示用户的奖项clearInterval(go);//清除定时器}</script>

0 0