<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>抽奖</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <style>

            * {

                padding: ;

                margin: ;

                -moz-box-sizing: border-box;

                -webkit-box-sizing: border-box;

                -o-box-sizing: border-box;

                -ms-box-sizing: border-box;

                box-sizing: border-box;

                font-size: %;

            }

            .content {

                width: %;

                height: auto;

                background: url('./images/bg.png') no-repeat;

                background-size: % auto;

                position: relative;

            }

            .content .rotateBox {

                width: %;

                height: auto;

                margin-top: 25px;

                position: relative;

            }

            .content .rotateBox .bg {

                display: block;

                width: %;

                height: auto;

            }

            .content .rotateBox .star {

                display: inline-block;

                position: absolute;

                top: %;

                left: %;

                -webkit-transform: translate(-%, -%);

                -moz-transform: translate(-%, -%);

                -ms-transform: translate(-%, -%);

                transform: translate(-%, -%);

                width: %;

                height: %;

                background: url('./images/btn.png') center center no-repeat;

                background-size: %;

            }

            .content .rotateBox .show {

                position: absolute;

                top: %;

                left: %;

                width: %;

                height: %;

                background: url('./images/car.png') top center no-repeat;

                background-size: 40px auto;

            }

            .content .infor {

                width: %;

                margin-top: 25px;

                padding: 25px 30px 35px 40px;

                background: url('./images/bg2.png') no-repeat;

                background-size: % auto;

            }</style>

    </head>

    <body>

        <div class="content">

            <div class="rotateBox">

                <img src="./images/img.png" alt="" class="bg" />

                <span class="show"></span>

                <span class="star"></span>

            </div>

        </div>

    </body>

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>

    <script type="text/javascript" src="js/jquery.easing.min.js"></script>

    <script>

        $(function() {

            var $btn = $('.show'); // 旋转的div

            var playnum = ; //初始次数，由后台传入

//            $('.playnum').html(playnum); //显示还剩下多少次抽奖机会

            var isture = ; //是否正在抽奖

            var clickfunc = function() {

                var data = [, , , , , ]; //抽奖

                //data为随机出来的结果，根据概率后的结果

                data = data[Math.floor(Math.random() * data.length)]; //1~6的随机数

                switch(data) {

                    case :

                        rotateFunc(, , '恭喜您获得2000元理财金');

                        break;

                    case :

                        rotateFunc(, , '恭喜您获得2000元理财金2');

                        break;

                    case :

                        rotateFunc(, , '恭喜您获得2000元理财金3');

                        break;

                    case :

                        rotateFunc(, -, '谢谢参与4');

                        break;

                    case :

                        rotateFunc(, , '谢谢参与5');

                        break;

                    case :

                        rotateFunc(, , '谢谢参与6');

                        break;

                }

            }

            $(".star").click(function() {

                if(isture) return; // 如果在执行就退出

                isture = true; // 标志为 在执行

                if(playnum <= ) { //当抽奖次数为0的时候执行

                    alert("没有次数了");

//                    $('.playnum').html(0); //次数显示为0

                    isture = false;

                } else { //还有次数就执行

                    playnum = playnum - ; //执行转盘了则次数减1

                    if(playnum <= ) {

                        playnum = ;

                    }

//                    $('.playnum').html(playnum);

                    clickfunc();

                }

            });

            var rotateFunc = function(awards, angle, text) {

                isture = true;

                $btn.stopRotate();

                $btn.rotate({

                    angle: , //旋转的角度数

                    duration: , //旋转时间

                    animateTo: angle + , //给定的角度,让它根据得出来的结果加上1440度旋转

                    callback: function() {

                        isture = false; // 标志为 执行完毕

                        alert(text);

                    }

                });

            };

        });

    </script>

</html>

jq 抽奖转盘的更多相关文章

  1. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

  2. jquery实现抽奖转盘

    用jquery通过配置参数实现抽奖转盘 1.html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  3. JS：九宫格抽奖转盘实例

    工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示.可以用于取代一些flash抽奖程序. 机制说明: 1.通过定义lottery-unit来控制节点的个数及索引: 2.通过设置lottery ...

  4. Html5-Canvas实现简易的抽奖转盘

    ###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...

  5. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  6. 抽奖转盘（jqueryrotate.js）

    jqueryrotate.js抽奖转盘,使用方便,兼容各浏览器,效果如下图 <!DOCTYPE> <head> <meta http-equiv="Conten ...

  7. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

  8. android仿漫画源码、抽奖转盘、Google相册、动画源码等

    Android精选源码 android实现仿今日头条的开源项目 波浪效果,实现流量的动态显示 美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等 android仿漫画源码 android一个视差 ...

  9. 用CSS实现一个抽奖转盘

    效果 基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 首先画一个转盘, <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. xBIM WeXplorer 设置模型颜色

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  2. 业余草分享 Spring Boot 2.0 正式发布的新特性

    就在昨天Spring Boot2.0.0.RELEASE正式发布,今天早上在发布Spring Boot2.0的时候还出现一个小插曲,将Spring Boot2.0同步到Maven仓库的时候出现了错误, ...

  3. MongoDB,子查询

    //1.从sub(订单明细)对订单号分组,查询最多子订单的单号一条数据,重命名orderNo字段为num//2.根据这个sub.num(从结果集里获取第一条结果),查询main(主档表) db.mai ...

  4. NLP︱词向量经验总结（功能作用、高维可视化、R语言实现、大规模语料、延伸拓展）

    R语言由于效率问题,实现自然语言处理的分析会受到一定的影响,如何提高效率以及提升词向量的精度是在当前软件环境下,比较需要解决的问题. 笔者认为还存在的问题有: 1.如何在R语言环境下,大规模语料提高运 ...

  5. OkHttp使用教程——网络操作之OkHttp, Volley以及Gson

    写这篇文章的动机 在安卓项目中有一个问题可能无法避免:网络.不管你是加载图片,请求API数据还是从因特网上获得一个字节,你都是在使用网络. 鉴于网络在安卓中的重要性与基础性,当今安卓开发者面临的问题之 ...

  6. php字符串递增

    当递增变量是字符的时候 $a="a"; $a++; echo $a;//结果是b $a="Z"; $a++; echo $a;// 结果是AA $a=" ...

  7. JLINK（SEGGER）灯不亮 USB不识别固件修复、clone修改

    今天调SMT32插拔几下,JLINK竟然挂掉了网上找了这个教程,搞了半天才搞好,驱动没装好!WIN7系统,自动安装的驱动是GPS.COM10,郁闷,错误来的.应该是:atm6124.sys.要手动选择 ...

  8. Java Web项目（Extjs）报错五

    1. Java Web项目(Extjs)报错五 具体报错如下: usage: java org.apache.catalina.startup.Catalina [ -config {pathname ...

  9. TypeError: Error #1034: 强制转换类型失败:无法将 "0.49" 转换为 mx.graphics.IFill。

    1.错误描述 TypeError: Error #1034: 强制转换类型失败:无法将 "0.49" 转换为 mx.graphics.IFill. at mx.charts.ser ...

  10. windows打开和关闭默认共享方法汇总

    Windows启动时都会默认打开admin$ ipc$ 和每个盘符的共享,对于不必要的默认共享,一般都会把它取消掉,可当又需要打开此默认共享时,又该从哪里设置呢.经过自己的验证,汇总出一下方法. 一: ...