编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

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

作者:王俊祥的菜鸟博客  发布日期:2013-12-13 22:08:42
  • 收藏本文    我要投稿
  • 今天需要用个抽奖程序,网上大部分是flash的,想用需付款,一怒之下了这个精简版类似转盘的抽奖程序。

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

    
    
    <span onclick="getAward();">go</span><!--点击开始抽奖--><span onclick="stopAward();">stop</span>
    0
    1
    2
    3
    4
    5
    6
    7
    8
    
    

    一下是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>


Tag标签:JS+CSS  类似  转盘  
  • 专题推荐