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

jopen 11年前

精简版类似转盘的抽奖程序。这是简单0-8个奖品页面，0-8即每个奖品，改的时候只需要自己把他们换成不同的样式就OK了。

    <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;        //第一个奖品代号0        var end = 8;        //最后一个奖品代后是8        var 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) {            //后台获取中奖代号award            stop = award;            //把中奖信息传递给stop        }var showAward = function(award) {            alert(award);            //提示用户的奖项            clearInterval(go);            //清除定时器        }        </script>

来自：http://blog.csdn.net/iammaking/article/details/17287697