js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器

阳光穿透心脏的1/2处 2022-07-29 11:44 222阅读 0赞

原文：[js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器][js_jquery]

源代码下载地址：[http://www.zuidaima.com/share/1779633798073344.htm][js_jquery]

看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究了下  
queryRotate 这个插件就可以实现这个功能  
jqueryRotate：  
支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现  
google code地址：http://code.google.com/p/jqueryrotate/  
下面了解下这个插件怎么使用

$("触发转动元素").rotate(45); //直接这样子调用的话就是变换角度
    
    $("触发转动元素").getRotateAngle(); //返回对象当前的角度
    
    $("触发转动元素").stopRotare(); //停止旋转动画
    
    $("触发转动元素").rotateRight() 向右旋转90度 $("触发转动元素").rotateLeft()向左旋转90度。

$("触发转动元素").rotate({ 　
    　　　　  angle:0,  //起始角度
    　　　　　animateTo:180,  //结束的角度
    　　　　　duration:3000， //转动时间
    　　　　　callback:function(){}, //回调函数
    　　　　　easing:$.easing.easeOutSine // $.easing.easeInOutExpo 运动的效果，需要引用jquery.easing.min.js的文件
    　 })
    
    $("触发转动元素").rotate(45); //转动45
    
    $("触发转动元素").getRotateAngle(); //返回对象当前的角度
    
    $("触发转动元素").stopRotare(); //停止旋转动画
    
    另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。

大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度 例

一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内

二等奖 概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内

三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内

下面以一个简单demo为例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="jQueryRotate.2.2.js"></script>
    <script type="text/javascript" src="jquery.easing.min.js"></script>
    <script type="text/javascript" src="zp.js"></script>
    <style type="text/css">
    body {
    	background: url(bg.png) 0 0 repeat;
    }
    
    .rotate-content {
    	width: 270px;
    	position: relative;
    	height: 270px;
    	background: url(activity-lottery-bg.png)
    		no-repeat 0 0;
    	background-size: 100% 100%;
    	margin: 0 auto
    }
    
    .rotate-con-pan {
    	background: url(disk.jpg)
    		no-repeat 0 0;
    	background-size: 100% 100%;
    	position: relative;
    	width: 255px;
    	height: 255px;
    	padding-top: 15px;
    	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	margin: 0 auto
    }
    
    .rotate-con-zhen {
    	width: 112px;
    	height: 224px;
    	background: url(start.png)
    		no-repeat 0 0;
    	background-size: 100% 100%;
    	margin: 0 auto
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="rotate-content">
    						<div class="rotate-con-pan">
    							<div class="rotate-con-zhen"></div>
    						</div>
    					</div>
    </body>
    <script type="text/javascript">
    $(function(){
    	$(".rotate-con-zhen").rotate({
    		bind:{
    			click:function(){
    				var a = runzp();
    				 $(this).rotate({
    					 	duration:3000,
    					 	angle: 0, 
                			animateTo:1440+a.angle,
    						easing: $.easing.easeOutSine,
    						callback: function(){
    							alert(a.prize+a.message);
    						}
    				 });
    			}
    		}
    	});
    });
    </script>
    </html>

zp.js

/****************************************************
     *	 Author :	xuyw			    *
     *	 Version:   v1.0		            *
     *   Email  :   xyw10000@163.com                    *
    ****************************************************/
    
    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;
    }

首先 转盘的角度取决于图片,转盘的业务决定代码复杂度.望各位根据实际情况开发

附上我的小转盘

![20140612164126209.jpg][]

![20140414135940183.jpg][]

由最代码官方编辑于2014-6-12 16:43:34

[js_jquery]: http://www.zuidaima.com/share/1779633798073344.htm
[20140612164126209.jpg]: http://static.zuidaima.com/images/1/201406/20140612164126209.jpg
[20140414135940183.jpg]: http://static.zuidaima.com/images/14415/201404/20140414135940183.jpg