javascript、jquery抽奖小程序

  • 内容
  • 评论
  • 相关

简单实现原理上抽奖,丰富的功能可在此基础上不断完善,
用到的文件:
index.html index.css index.js employee.js jquery.js
依次列出各个文件:
index.html:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
    <body>
        <div id="container">
            <div id='awardsShow'>
                <ul></ul>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="employee.js"></script>
<script type="text/javascript" src="index.js"></script>

index.css:

/* 
    Document   : index
    Created on : 2013-1-6, 15:08:07
    Author     : ThinkPad
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
body {
    background: url('nh.jpg') repeat;
}
ul {
    list-style: none;
}
#awardsShow {
    text-align: center;
}

index.js

var take;
var awards;
var number = 0;
$(document).ready(function(){
    awards = new Array('三等奖|30|5|微波炉一台','二等奖|20|5|冰箱一台','一等奖|10|5|iphone一台');
    
    //计算一共要抽奖几次
    for(i = 0;i < awards.length; i++){
        var amount = awards[i].split('|')[1]/awards[i].split('|')[2];
        number += amount;
    }

    for(var i = 0; i < awards.length; i++){
        var award = awards[i].split('|');
        var str = '<li>'+award[0]+award[1]+'名'+award[3]+'</li>';
        $('#awardsShow ul').append(str);
    }

    take = new lottery();
    
    //绑定回车事件
    $(document).keypress(function(e){
        if(e.which == 13){
            take.handle();
        }
});
});
//将数组打乱
function shuffle(arr) {
    var i = arr.length;
    var ii = Math.floor(Math.random()*i);
    var len = arr.length;
    var ii = Math.floor(Math.random()*len);
    for(var i = 0; i < len; i++){
        var tmp = arr[i];
        arr[i] = arr[ii];
        arr[ii] = tmp;
    }
    return arr;
}

function arraySlice(arr,start,count){
    arr = employee;
    start = Math.floor(Math.random()*employee.length);
    count = 5;
    console.info(start,count)
    var part;
    part = arr.slice(start,start+count);
    console.info(part);
    if(start+count>arr.length){
        console.info((start+count)-(arr.length));
        part = part.concat(arr.slice(0,(start+count)-(arr.length)));
    }
    console.info(part);
    return part.join(' ');
}

//抽奖主程序
function game(){
    //如果单击回车时stop为真,则表示要停下来
    if(take.stop){
        console.log('停止');
        return false;
    }else{
        console.log('不通知');
        var employeePart = shuffle(employee);
        var start = Math.floor(Math.random()*(employeePart.length));
        var result = arraySlice(employeePart,start,awards[0].split('|')[2]);
        $('#awardsShow ul').html(result);
        setTimeout(game,100);
    }
}

function circle(){
        var employeePart = shuffle(employee);
        var start = Math.floor(Math.random()*(employeePart.length+1));
        var result = arraySlice(employeePart,start,awards[0].split('|')[2]);
        $('#awardsShow ul').html(result);
}

var lottery = function(){
    //决定是抽奖开始停下
    this.stop = false;
    this.action = 'begin';
    this.init = function(){
        this.step = 0;
        this.stop = false;
    };
    this.handle = function(){
        switch(this.action){
            case 'begin':
                this.action = 'stop';
                this.stop = false;
                game();
                break;
            case 'stop':
                this.action = 'begin';
                this.stop = true;
                break;
        }
    };
};

employee.js

    var employee = new Array(
            'hava', 'hellogxp', 'Davaid', 'Lili','Gavin', 'defrgt','kooke','fkfrjr'
            );

评论

0条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注