Jscex和HTML 5制作的抽奖小程序(1)(2)

时间:2013-03-06 14:58来源:未知作者:admin 点击: 次

分享到：

代码部分： !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html lang = 'zh-CN' xml:lang = 'zh-CN' xmlns = 'http://www.w3.org/1999/xhtm

代码部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Content-Language" content="zh-CN"/> 
<meta name="robots" content="index, follow" /> 
<title>开源中国 - 抽奖小程序</title> 
<script type="text/javascript" src="http://www.oschina.net/js/2012/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex.js"></script> 
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-parser.js"></script> 
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-jit.js"></script> 
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-builderbase.js"></script> 
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-async.js"></script> 
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-async-powerpack.js"></script> 
<style> 
* {font-size:12pt;font-weight:bold;}  
body {margin: 5px;}  
form {margin:0 0 20px 0;}  
input {text-align:center;}  
</style> 
</head> 
<body> 
<form> 
共有 100 个会员，抽取 <input type='text' id='c_count' name='count' value='10' size='4'/> 名幸运会员  
<input type='button' id='btn_begin' value='开始抽奖' onclick='begin_chose()'/> 
</form> 
<canvas id="myCanvas">Fallback content, in case the browser does not support Canvas.</canvas> 
</body> 
 
<script type='text/javascript'> 
var PERSON_COUNT = 100;  
var brick_width = 40;  
var brick_height = 22;  
var col_count = 0;  
var results=new Array();  
var canvas = document.getElementById('myCanvas');  
var ctx = canvas.getContext('2d');  
var sound1,sound2,sound3;  
resize_canvas();  
draw_bricks();  
load_songs();  
 
function resize_canvas(){  
    var cWidth = document.body.clientWidth - 10;  
    var cHeight = (PERSON_COUNT / (cWidth / (brick_width+10))) * (brick_height+10) + 50;  
    if (canvas.width  < cWidth)  
        canvas.width  = cWidth;      
    if (canvas.height < cHeight)  
        canvas.height = cHeight;     
}  
 
function load_songs(){  
    sound1 = new Audio("http://www.oschina.net/uploads/e.wav");  
    sound1.load();  
    sound2 = new Audio("http://www.oschina.net/uploads/e2.wav");  
    sound2.load();  
    sound3 = new Audio("http://www.oschina.net/uploads/e3.wav");  
    sound3.load();  
}  
 
function draw_bricks(){  
    var x = 0,y = 0;  
    var tmp_c_count = 0;  
    for(c = 0; c < PERSON_COUNT; c++){  
        ctx.fillStyle="#40AA53";  
        ctx.fillRect(x, y, brick_width, brick_height);        
        ctx.fillStyle="#fff";  
        ctx.fillText(c+1,x+10,y+brick_height-7);  
        x += (brick_width + 10);  
        tmp_c_count ++;  
        if((x + brick_width) > canvas.width){  
            y += (brick_height + 10);  
            x = 0;  
            if(col_count == 0)  
                col_count = tmp_c_count;  
        }  
    }  
}  
 
function begin_chose(){  
    $('#btn_begin').attr('disabled',true);  
    var nc = parseInt($('#c_count').val());  
    beginAsync(nc).addEventListener("success", function () {  
        sound3.play();  
        $('#btn_begin').removeAttr("disabled");       
    }).start();  
}  
 
var beginAsync = eval(Jscex.compile("async", function(num_count){  
    do{  
        var thisV = $await(drawAsync(20));  
        if(jQuery.inArray(thisV, results)<0){  
            results.push(thisV);  
            sound2.play();    
            if(results.length >= num_count)  
                break;  
        }  
    }while(true);  
}));  
 
var drawAsync = eval(Jscex.compile("async", function (ccount) {  
    var last = -1;  
    var r;  
    for(oc=0;oc<ccount;oc++){  
        r = Math.floor(Math.random() * PERSON_COUNT) + 1;//0-PERSON_COUNT         
        if(jQuery.inArray(r, results)>=0)  
            continue;  
        var x = ((r - 1) % col_count) * (brick_width + 10);  
        var y = (Math.ceil(r / col_count)-1) * (brick_height + 10);  
        //alert("r="+r+",x="+x+",y="+y);  
        //绘制高亮显示          
        ctx.fillStyle="#F00";  
        ctx.fillRect(x, y, brick_width, brick_height);        
        ctx.fillStyle="#fff";  
        ctx.fillText(r,x+10,y+brick_height-7);  
        //擦除之前的高亮显示  
        if(last > 0){  
            var x = ((last - 1) % col_count) * (brick_width + 10);  
            var y = (Math.ceil(last / col_count)-1) * (brick_height + 10);  
            //绘制高亮显示          
            ctx.fillStyle="#40AA53";  
            ctx.fillRect(x, y, brick_width, brick_height);        
            ctx.fillStyle="#fff";  
            ctx.fillText(last,x+10,y+brick_height-7);  
        }  
        last = r;  
        sound1.play();  
        $await(Jscex.Async.sleep(100)); // 暂停10毫秒  
    }  
    return r;  
}));  
</script> 
</html>