当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » JavaScript  » 网页设计与交互
分享到: 
收藏 +0
1
之前些的一个 小抽奖程序已经无法满足需求,这个抽奖小程序是给 OSC源创会(北京)准备的。使用了  Jscex 和 HTML5 Canvas API 制作
在线演示: http://www.osctools.net/jsbin/fliydwck/5 
请使用 chrome 浏览器访问(有声音),使用firefox浏览器(无声音),使用IE浏览器(无法执行)
此程序仅供osc使用,不适合通用情况,因为有很多不足,你可以在这基础上改进并分享给大家。
标签: Jscex HTML5 OSCHINA

代码片段(2) [全屏查看所有代码]

1. [图片] 未命名-1.png    

2. [文件] lottery.html ~ 4KB     下载(493)     跳至 [2] [全屏预览]

<!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>


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(43)

  • 1楼:libinqq 发表于 2012-06-27 15:12 回复此评论
    老赵见到你用    Jscex  肯定会笑。
  • 2楼:首席xx师 发表于 2012-06-27 15:13 回复此评论
    给力!!!!!!
  • 3楼:迷途d书童 发表于 2012-06-27 15:13 回复此评论
    very nice .
  • 4楼:Beyond-Bit 发表于 2012-06-27 15:15 回复此评论
    “使用IE浏览器(无法执行) ”这句话看的我笑鸟!哈哈哈!

    不错短短时间写出一个介个程序表示很碉堡!

  • 5楼:xu81.com 发表于 2012-06-27 15:17 回复此评论
    额,19 stable 版本的chrome,打开demo卡死了,抽奖结果一直没出来,oschina的整个页面都卡卡的,最后是完全关闭chrome才正常。
  • 6楼:北之零年 发表于 2012-06-27 15:17 回复此评论
    每抽到一个号能在上面显示一个就好了。
  • 7楼:D-dragon 发表于 2012-06-27 15:19 回复此评论
    有点意思!不过这个API设计有点问题啊,比如 ctx.fillStyle = "#40AA53" ;之类,设计成ctx.style("#40AA53 ")之类更好吧?
  • 8楼:耗子小毛 发表于 2012-06-27 15:19 回复此评论
    建议最后的时候把中的号码显示出来。。真个列表太大了,一个个找太蛋疼了。
  • 9楼:酱哥哥 发表于 2012-06-27 15:21 回复此评论
    帅气的很
  • 10楼:极品渣子 发表于 2012-06-27 15:21 回复此评论
    很好,很强大!
  • 11楼:极品渣子 发表于 2012-06-27 15:23 回复此评论

    引用来自“耗子小毛”的评论

    建议最后的时候把中的号码显示出来。。真个列表太大了,一个个找太蛋疼了。
    确实
  • 12楼:李汶 发表于 2012-06-27 15:24 回复此评论
    IE9表示情绪稳定无压力
  • 13楼:FatYU 发表于 2012-06-27 15:27 回复此评论
    begin_chose(); chose是choose的过去式~
  • 14楼:Deepseath 发表于 2012-06-27 15:40 回复此评论
    Opera也是有声的^_^
  • 15楼:junwong 发表于 2012-06-27 15:46 回复此评论
    很不错,爽
  • 16楼:atearsan 发表于 2012-06-27 16:04 回复此评论
    眼花
  • 17楼:FoxHu 发表于 2012-06-27 16:05 回复此评论
    老大速度真快!牛!
  • 18楼:小杨阿哥哥 发表于 2012-06-27 16:10 回复此评论
    有bug,我的出来11个
  • 19楼:彭博 发表于 2012-06-27 16:12 回复此评论
    nice...
  • 20楼:兔bug 发表于 2012-06-27 16:19 回复此评论
    good
开源从代码分享开始 分享代码