本系统实现了一个幸运转盘抽奖,兼容多种浏览器(支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现),适合摸鱼hhh。
(谷歌浏览器演示)
幸运转盘抽奖:
开始抽奖:
抽到了三等奖(hahaha)
摇了半天中了二等奖:
一等奖大奖来了:
算了,我抽了大半天没抽到。。
本js抽奖小系统实现了以下功能:
1、继续加油
2、三等奖
3、二等奖
4、一等奖
数据库:无
开发工具:Eclipse(Myeclispe、Idea也可以)
知识点:js+jquery+queryRotate
zp.js:
function randomnum(smin, smax) {// 获取2个值之间的随机数 var Range = smax - smin; var Rand = Math.random(); return (smin + Math.round(Rand * Range)); } function runzp() { var data = '[{"id":1,"prize":"590大洋","v":1.0},{"id":2,"prize":"100RMB","v":2.0},{"id":3,"prize":"安慰奖","v":48.0}]';// 奖项json var obj = eval('(' + data + ')'); var result = randomnum(1, 100); var line = 0; var temp = 0; var returnobj = "0"; var index = 0; //alert("随机数"+result); for ( var i = 0; i < obj.length; i++) { var obj2 = obj[i]; var c = parseFloat(obj2.v); temp = temp + c; line = 100 - temp; if (c != 0) { if (result > line && result <= (line + c)) { index = i; // alert(i+"中奖"+line+"<result"+"<="+(line + c)); returnobj = obj2; break; } } } var angle = 330; var message = ""; var myreturn = new Object; if (returnobj != "0") {// 有奖 message = "恭喜中奖了"; var angle0 = [ 344, 373 ]; var angle1 = [ 226, 256 ]; var angle2 = [ 109, 136 ]; switch (index) { case 0:// 一等奖 var r0 = randomnum(angle0[0], angle0[1]); angle = r0; break; case 1:// 二等奖 var r1 = randomnum(angle1[0], angle1[1]); angle = r1; break; case 2:// 三等奖 var r2 = randomnum(angle2[0], angle2[1]); angle = r2; break; } myreturn.prize = returnobj.prize; } else {// 没有 message = "再接再厉"; var angle3 = [ 17, 103 ]; var angle4 = [ 197, 220 ]; var angle5 = [ 259, 340 ]; var r = randomnum(3, 5); var angle; switch (r) { case 3: var r3 = randomnum(angle3[0], angle3[1]); angle = r3; break; case 4: var r4 = randomnum(angle4[0], angle4[1]); angle = r4; break; case 5: var r5 = randomnum(angle5[0], angle5[1]); angle = r5; break; } myreturn.prize = "继续努力!"; } myreturn.angle = angle; myreturn.message = message; return myreturn; }
如果运行代码中遇到问题,或者需要完整源码和报告,可以加博主V交流:Code2Life2
觉得有用,记得一键三连哦!