zoukankan      html  css  js  c++  java
  • 抽奖(转)

    工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示。

    机制说明:

    1、通过定义lottery-unit来控制节点的个数及索引;

    2、通过设置lottery.crcle来定义需要转动的基本次数,在这个次数内,定时器的时间间隔不断递减,知道某个具体的数值;

    3、当外界设置了lottery.prize即中奖目标的索引后,检查当当前转动次数已经大于lottery.crcle,这个过程开始递减定时器的时间间隔,直到lottery.prize等于lottery.prize,这时候初始化所有参数。

    在线演示:http://blog.cxycs.com/demos/lottery/

    源码下载:http://blog.cxycs.com/demos/lottery.rar

    HTML代码:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>九宫格 抽奖转盘演示</title>
    <style type="text/css">
    #lottery{
     454px;
    margin: 100px auto 0;
    }
    #lottery table td{
     150px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    #ccc;
    font-size: 24px;
    color: #333;
    }
    #lottery table td a{
     150px;
    height: 150px;
    line-height: 150px;
    display: block;
    text-decoration: none;
    }
    #lottery table td.active{
    color: red;
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div id="lottery">
    <table>
    <tr>
    <td class="lottery-unit lottery-unit-0">1</td>
    <td class="lottery-unit lottery-unit-1">2</td>
    <td class="lottery-unit lottery-unit-2">3</td>
    </tr>
    <tr>
    <td class="lottery-unit lottery-unit-7">8</td>
    <td><a href="#">开始</a></td>
    <td class="lottery-unit lottery-unit-3">4</td>
    </tr>
    <tr>
    <td class="lottery-unit lottery-unit-6">7</td>
    <td class="lottery-unit lottery-unit-5">6</td>
    <td class="lottery-unit lottery-unit-4">5</td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    JS代码:

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    var lottery={
    index:0, //当前转动到哪个位置
    count:0, //总共有多少个位置
    timer:0, //setTimeout的ID,用clearTimeout清除
    speed:200, //初始转动速度
    times:0, //转动次数
    cycle:50, //转动基本次数:即至少需要转动多少次再进入抽奖环节
    prize:-1, //中奖位置
    init:function(id){
    if ($("#"+id).find(".lottery-unit").length>0) {
    $lottery = $("#"+id);
    $units = $lottery.find(".lottery-unit");
    this.obj = $lottery;
    this.count = $units.length;
    $lottery.find(".lottery-unit-"+this.index).addClass("active");
    };
    },
    roll:function(){
    var index = this.index;
    var count = this.count;
    var lottery = this.obj;
    $(lottery).find(".lottery-unit-"+index).removeClass("active");
    index += 1;
    if (index>count-1) {
    index = 0;
    };
    $(lottery).find(".lottery-unit-"+index).addClass("active");
    this.index=index;
    return false;
    },
    stop:function(index){
    this.prize=index;
    return false;
    }
    };

    function roll(){
    lottery.times += 1;
    lottery.roll();
    if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
    clearTimeout(lottery.timer);
    lottery.prize=-1;
    lottery.times=0;
    click=false;
    }else{
    if (lottery.times<lottery.cycle) {
    lottery.speed -= 10;
    }else if(lottery.times==lottery.cycle) {
    var index = Math.random()*(lottery.count)|0;
    lottery.prize = index;
    }else{
    if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
    lottery.speed += 110;
    }else{
    lottery.speed += 20;
    }
    }
    if (lottery.speed<40) {
    lottery.speed=40;
    };
    //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
    lottery.timer = setTimeout(roll,lottery.speed);
    }
    return false;
    }

    var click=false;

    window.onload=function(){
    lottery.init('lottery');
    $("#lottery a").click(function(){
    if (click) {
    return false;
    }else{
    lottery.speed=100;
    roll();
    click=true;
    return false;
    }
    });
    };
    </script>

    来源:http://blog.cxycs.com/article/56

  • 相关阅读:
    MySQL0902作业(待巩固)
    Mysql之懵逼的一天
    sql查询语句详解
    MySQl语句总结
    0831练习作业(待纠正)
    0824MySQL
    Python数据分析——正则表达式
    Python数据分析——Beautiful Soup
    Python数据分析——requests使用
    Excle常用函数——Rank(统计排名)
  • 原文地址:https://www.cnblogs.com/yelongsan/p/5476595.html
Copyright © 2011-2022 走看看