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

2022-06-29 JavaScript 531
码上有钱
码上有钱 2022-06-29 09:19
所需:2积分

项目描述:
看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究了下
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/

下面了解下这个插件怎么使用

1    $("触发转动元素").rotate(45); //直接这样子调用的话就是变换角度    
2    
3    $("触发转动元素").getRotateAngle(); //返回对象当前的角度    
4    
5    $("触发转动元素").stopRotare(); //停止旋转动画    
6    
7    $("触发转动元素").rotateRight() 向右旋转90度 $("触发转动元素").rotateLeft()向左旋转90度。    
01    $("触发转动元素").rotate({      
02          angle:0,  //起始角度    
03         animateTo:180,  //结束的角度    
04         duration:3000, //转动时间    
05         callback:function(){}, //回调函数    
06         easing:$.easing.easeOutSine // $.easing.easeInOutExpo 运动的效果,需要引用jquery.easing.min.js的文件    
07      })    
08    
09    $("触发转动元素").rotate(45); //转动45    
10    
11    $("触发转动元素").getRotateAngle(); //返回对象当前的角度    
12    
13    $("触发转动元素").stopRotare(); //停止旋转动画    
14    
15    另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。

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

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

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

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

下面以一个简单demo为例子

01    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
02    <html xmlns="http://www.w3.org/1999/xhtml">    
03    <head>    
04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
05    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>    
06    <script type="text/javascript" src="jQueryRotate.2.2.js"></script>    
07    <script type="text/javascript" src="jquery.easing.min.js"></script>    
08    <script type="text/javascript" src="zp.js"></script>    
09    <style type="text/css">    
10    body {    
11        background: url(bg.png) 0 0 repeat;    
12    }    
13    
14    .rotate-content {    
15        width: 270px;    
16        position: relative;    
17        height: 270px;    
18        background: url(activity-lottery-bg.png)    
19            no-repeat 0 0;    
20        background-size: 100% 100%;    
21        margin: 0 auto    
22    }    
23    
24    .rotate-con-pan {    
25        background: url(disk.jpg)    
26            no-repeat 0 0;    
27        background-size: 100% 100%;    
28        position: relative;    
29        width: 255px;    
30        height: 255px;    
31        padding-top: 15px;    
32        box-sizing: border-box;    
33        -moz-box-sizing: border-box;    
34        -webkit-box-sizing: border-box;    
35        margin: 0 auto    
36    }    
37    
38    .rotate-con-zhen {    
39        width: 112px;    
40        height: 224px;    
41        background: url(start.png)    
42            no-repeat 0 0;    
43        background-size: 100% 100%;    
44        margin: 0 auto    
45    }    
46    
47    </style>    
48    </head>    
49    
50    <body>    
51    
52    <div class="rotate-content">    
53                            <div class="rotate-con-pan">    
54                                <div class="rotate-con-zhen"></div>    
55                            </div>    
56                        </div>    
57    </body>    
58    <script type="text/javascript">    
59    $(function(){    
60        $(".rotate-con-zhen").rotate({    
61            bind:{    
62                click:function(){    
63                    var a = runzp();    
64                     $(this).rotate({    
65                            duration:3000,    
66                            angle: 0,    
67                            animateTo:1440+a.angle,    
68                            easing: $.easing.easeOutSine,    
69                            callback: function(){    
70                                alert(a.prize+a.message);    
71                            }    
72                     });    
73                }    
74            }    
75        });    
76    });    
77    </script>    
78    </html>

zp.js

01    /****************************************************    
02     *   Author :   xuyw                *    
03     *   Version:   v1.0                    *    
04     *   Email  :   xyw10000@163.com                    *    
05    ****************************************************/    
06    
07    function randomnum(smin, smax) {// 获取2个值之间的随机数    
08        var Range = smax - smin;    
09        var Rand = Math.random();    
10        return (smin + Math.round(Rand * Range));    
11    }    
12    
13    function runzp() {    
14        var data = '[{"id":1,"prize":"590大洋","v":1.0},{"id":2,"prize":"100RMB","v":2.0},{"id":3,"prize":"安慰奖","v":48.0}]';// 奖项json    
15        var obj = eval('(' + data + ')');    
16        var result = randomnum(1, 100);    
17        var line = 0;    
18        var temp = 0;    
19        var returnobj = "0";    
20        var index = 0;    
21    
22        //alert("随机数"+result);    
23        for ( var i = 0; i < obj.length; i++) {    
24            var obj2 = obj[i];    
25            var c = parseFloat(obj2.v);    
26            temp = temp + c;    
27            line = 100 - temp;    
28            if (c != 0) {    
29                if (result > line && result <= (line + c)) {    
30                    index = i;    
31                    // alert(i+"中奖"+line+"<result"+"<="+(line + c));    
32                    returnobj = obj2;    
33                    break;    
34                }    
35            }    
36        }    
37        var angle = 330;    
38        var message = "";    
39        var myreturn = new Object;    
40        if (returnobj != "0") {// 有奖    
41            message = "恭喜中奖了";    
42            var angle0 = [ 344, 373 ];    
43            var angle1 = [ 226, 256 ];    
44            var angle2 = [ 109, 136 ];    
45            switch (index) {    
46            case 0:// 一等奖    
47                var r0 = randomnum(angle0[0], angle0[1]);    
48                angle = r0;    
49                break;    
50            case 1:// 二等奖    
51                var r1 = randomnum(angle1[0], angle1[1]);    
52                angle = r1;    
53                break;    
54            case 2:// 三等奖    
55                var r2 = randomnum(angle2[0], angle2[1]);    
56                angle = r2;    
57                break;    
58            }    
59            myreturn.prize = returnobj.prize;    
60        } else {// 没有    
61            message = "再接再厉";    
62            var angle3 = [ 17, 103 ];    
63            var angle4 = [ 197, 220 ];    
64            var angle5 = [ 259, 340 ];    
65            var r = randomnum(3, 5);    
66            var angle;    
67            switch (r) {    
68            case 3:    
69                var r3 = randomnum(angle3[0], angle3[1]);    
70                angle = r3;    
71                break;    
72            case 4:    
73                var r4 = randomnum(angle4[0], angle4[1]);    
74                angle = r4;    
75                break;    
76            case 5:    
77                var r5 = randomnum(angle5[0], angle5[1]);    
78                angle = r5;    
79                break;    
80            }    
81            myreturn.prize = "继续努力!";    
82    
83        }    
84        myreturn.angle = angle;    
85        myreturn.message = message;    
86        return myreturn;    
87    }

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



运行环境:
浏览器


项目技术(必填):
html js jquery


数据库文件(可选):
请把数据库文件拆出上传到百度网盘,提供百度网盘分享地址

依赖包文件(可选):
请把依赖包文件拆出上传到百度网盘,提供百度网盘分享地址(比如java的jar包)

资源包文件(可选):
请把依赖包文件拆出上传到百度网盘,提供百度网盘分享地址(比如图片等文件)

运行视频(可选):
https://www.bilibili.com/video/BV1r3411w7LA/?vd_source=37b761e7ae71a8841e0b63bce0a58391

是否原创(转载必填原文地址):
原创

项目截图(必填):
1.png
运行截图(必填):



注意事项(可选):


评论
    热搜排行
    最新国外极品后台管理系统模板ace admin v1.3,多种开发语言可用,HTML5+Bootstrap3.0 446
    高仿sina微博个人微博html网页模板源代码下载 346
    HTML5情人节表白代码 711
    【S017】SpringBoot影视资讯网 电影网站项目源码 Java毕业设计 646
    html网站内容管理系统后台模板源代码下载,花钱买的模板 658
    【S029】SpringBoot vue前后端分离课程管理项目源码 Java毕业设计 681
    【S003】图书馆管理系统(Spring + Spring MVC + MyBatis) SSM项目源码 284
    【S019】Java超级玛丽游戏系统源项目源码 javase窗体项目 Java毕业设计 357
    js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器 480
    【S009】大学毕业生就业信息管理系统项目源码 290
    相关资源
    js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器 57
    强大的jquery后台开发框架BUI,UI 样例丰富 103
    HTML5+jQuery制作温馨浪漫爱心表白动画特效 89
    html网站内容管理系统后台模板源代码下载,花钱买的模板 181
    最新国外极品后台管理系统模板ace admin v1.3,多种开发语言可用,HTML5+Bootstrap3.0 68
    【S013】JavaWeb学生宿舍管理系统 住宿管理系统 寝室管理系统项目源码 Java毕业设计 57
    【S014】SpringBoot网上书店 图书商城系统项目源码 103
    【S028】JavaWeb 宠物商城系统项目源码 Java毕业设计 143
    在线聊天静态网页模板html Demo 180
    【S032】TMS物流管理系统项目源码 68