js实现转盘抽奖功能

2024-08-15 19:12:44

本文实例为大家分享了js实现转盘抽奖功能的具体代码，供大家参考，具体内容如下

效果：点击抽奖按钮，转盘开始旋转数圈后停止

示例：

抽奖html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon-precomposed" href="icon.png" />
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;  minimum-scale=1.0; maximum-scale=1.0" />
<meta name="MobileOptimized" content="320" />
<title>抽奖页</title>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="disk.js"></script>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>

<body>
    <div class="wrap_disk">
        <div class="page">
            <div id="divDisk" class="disk">
                <div id="divPointer" class="pointer"></div>
            </div>
        </div>
    </div> 
    <script type="text/javascript">
        disk.init();//抽奖插件初始化
        if($(window).height()<568){
            $('.wrap_disk').css('height','568px');
        }
        else{
            $('.wrap_disk').css('min-height',$(window).height());
        }
    </script>
</body>
</html>

抽奖实现js

1）原生版

// JavaScript Document
(function(win){
    var degDivide = 45;
    var prizeName;
    var prizeTypeArr = ['一等奖','三等奖','继续加油！','二等奖','参与奖'];
    var prizeTypeDegArr = [[300],[180],[240,0],[60],[120]];
    var disk = {
        prizeType : 0,
        nowDeg : 0,
        willDeg : 0,
        weixinId : null,
        contentId : null,
        turnFlag : true,
        count : null,
        init : function(id,contentid,count,flag){
            var t = this;
            divPointer.onclick = function(){
//                      t.nowDeg = t.nowDeg%360;
//                      /*webkit*/
//                      divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
//                      divPointer.style.webkitTransitionDuration = '4s'
//                      divPointer.style.webkitTransitionProperty = 'width';
//                      divPointer.style.webkitTransform = 'rotate('+ t.nowDeg +'deg)';
//                      /*ie*/
//                      divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
//                      divPointer.style.msTransitionDuration = '4s'
//                      divPointer.style.msTransitionProperty = 'width';
//                      divPointer.style.msTransform = 'rotate('+ t.nowDeg +'deg)';
                t.lottery();
            }   
        },
        lottery: function(){    
            var t = this;
                t.prizeType= t._rand();
                t._judge();
        },
        //获取范围内的随机数
         _rand: function (){
            var max=4;
            var min=0;
            return Math.floor(min+Math.random()*(max-min));
        },
        _judge: function(){
            var t = this,
            judgeArr = prizeTypeDegArr[t.prizeType],
            judgeArrLen = judgeArr.length;

            if(judgeArrLen == 1){
                t.willDeg = 1080 + judgeArr[0] + 2 + (degDivide-4)*Math.random();
                prizeName = prizeTypeArr[t.prizeType];
            }else if(judgeArrLen > 1){
                var judgeArrRan =Math.floor(judgeArrLen * Math.random());
                t.willDeg = 1080 + judgeArr[judgeArrRan] + 2 + (degDivide-4)*Math.random();
                prizeName = prizeTypeArr[t.prizeType];
            }else{
                return; 
            }
            t._turn();
        },
        _turn : function(){
            var t = this;
            setTimeout(function(){
                divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
                divPointer.style.webkitTransitionDuration = '4s'
                divPointer.style.webkitTransitionProperty = 'all';
                divPointer.style.webkitTransform = 'rotate('+ t.willDeg +'deg)';

                divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
                divPointer.style.msTransitionDuration = '4s'
                divPointer.style.msTransitionProperty = 'all';
                divPointer.style.msTransform = 'rotate('+ t.willDeg +'deg)';

                //t.nowDeg = t.willDeg;
            },100);
            setTimeout(function(){
                var clss;
                clss = "noPreize";
                t.myAlert('',prizeName,'ok',function(){
                    divPointer.style.webkitTransitionProperty = 'width';
                    divPointer.style.webkitTransform = 'rotate(0deg)';

                    divPointer.style.msTransitionProperty = 'width';
                    divPointer.style.msTransform = 'rotate(0deg)';

                    t.turnFlag = true;
                },clss);
            },4100)
        },
        tels : function(){
            var t = this;
            t.myPrompt('请填写手机号!','','确定','取消',function(){
                var telNum = $('.my_prompt_text input').val();
                var telephone_regx = /^(((13[0-9]{1})|14[0-9]{1}|15[0-9]{1}|18[0-9]{1})\d{8})$/;
                if(telNum == '' || !telephone_regx.exec(telNum)){
                    t.myAlert('','填写正确手机号','ok',function(){
                        t.tels();
                    });
                }else{
                    //Ajax提交手机号码
                    $.ajax({
                        type:"POST",
                        success:function(json){
                            var data = $.parseJSON(json);
                            var submitFlag = data.submit;
                            if(submitFlag == 'succeed'){
                                t.myAlert('','提交成功！','ok',function(){
                                    $('.my_prompt').hide();
                                    t.turnFlag = true;
                                }); 
                            }else{
                                t.myAlert('','提交失败！','ok',function(){
                                    t.tels();
                                }); 
                            }
                        },
                        error:function(){
                            t.myAlert('','请检查网络！','ok',function(){
                                t.tels();
                            });
                        },
                        timeout:'5000',
                        url:'/weixin/front_index.inc.php?type=turntable&action=submit',
                        data:{id:t.wenxinId,contentid:t.contentId,telephone:telNum} 
                    })
                }
            },function(){
                t.turnFlag = true;
                return;
            });
        },
        getPrize : function(){
            var t = this;
            $('.getIt').hide();
            divPointer.style.webkitTransitionProperty = 'width';
            divPointer.style.webkitTransform = 'rotate(0deg)';

            divPointer.style.msTransitionProperty = 'width';
            divPointer.style.msTransform = 'rotate(0deg)';

            t.tels();
        },
        myAlert : function(title,text,btnText,fn,cls){
            $('.my_alert').hide();
            $('.my_alert_title').html(title);
            $('.my_alert_text').html(text);
            if(btnText == '') btnText = 'ok';
            $('.my_alert_btn input').val(btnText);
            $('.my_alert_btn input').click(function(){
                $('.my_alert').hide();
                fn();   
            });
            if(cls == '' || cls == undefined){
                 $('.my_alert').attr('class','my_alert');
            }else{
                $('.my_alert').attr('class','my_alert ' + cls);
            }
            $('.my_alert').show();
        },
        myPrompt : function(title,text,btnTextY,btnTextN,fnY,fnN){
            $('.my_prompt').hide();
            $('.my_prompt_title').html(title);
            //$('.my_prompt_text').html(text);
            if(btnTextY == '') btnTextY = 'ok';
            if(btnTextN == '') btnTextN = 'no';
            $('.my_prompt_btnY').val(btnTextY).click(function(){
                $('.my_prompt').hide();
                fnY();  
            });
            $('.my_prompt_btnN').val(btnTextN).click(function(){
                $('.my_prompt').hide();
                fnN();  
            });
            $('.my_prompt').show();
        }
    }
    win.disk = disk;
})(window)

2）优化版（实际应用）

// JavaScript Document
(function(win){
    var degDivide = 60;//各奖品旋转角度范围60°
    var prizeName;//奖品名称
    //奖品次序及奖品名称
    var prizeTypeArr = ['继续加油！','二等奖','参与奖','三等奖','继续加油！','一等奖'];
    //奖品编号
    var prizeTypeArrType = [0,1,2,3,4,5];
    //奖品范围开始度数
    var prizeTypeDegArr = [[0],[60],[120],[180],[240],[300]];
    //var prizeTypeDegArr = [[0,240],[60],[120],[180],[300]];
    var disk = {//初始化插件参数
        prizeType : 0,
        nowDeg : 0,
        willDeg : 0,
        weixinId : null,
        contentId : null,
        turnFlag : true,
        count : null,
        init : function(id,contentid,count,flag){
            var t = this;
            //点击指定原生，触发抽奖方法
            divPointer.onclick = function(){
                t.lottery();
            }   
        },
        //抽奖方法实现
        lottery: function(){    
            var t = this;
            var url = '/award/choice-award';
            $.post(url, {}, function(msg){
                if(msg == 'false'){
                    alert('未中奖~');
                    return;
                }
                //赋值奖品编号
                t.prizeType= msg;
                t._judge();
            }); 
        },
        //获取指针旋转角度数
        _judge: function(){
            var t = this,
            judgeArr = prizeTypeDegArr[t.prizeType],
            judgeArrLen = judgeArr.length;

            if(judgeArrLen == 1){//设置旋转圈数
                t.willDeg = 1800 + judgeArr[0] + 2 + (degDivide-4)*Math.random();
                prizeName = prizeTypeArr[t.prizeType];
            }else if(judgeArrLen > 1){
                var judgeArrRan =Math.floor(judgeArrLen * Math.random());
                t.willDeg = 1800 + judgeArr[judgeArrRan] + 2 + (degDivide-4)*Math.random();
                prizeName = prizeTypeArr[t.prizeType];
            }else{
                return; 
            }
            t._turn();
        },
        //实现转盘旋转效果
        _turn : function(){
            var t = this;
            setTimeout(function(){
                divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
                divPointer.style.webkitTransitionDuration = '2s'
                divPointer.style.webkitTransitionProperty = 'all';
                divPointer.style.webkitTransform = 'rotate('+ t.willDeg +'deg)';

                divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
                divPointer.style.msTransitionDuration = '2s'
                divPointer.style.msTransitionProperty = 'all';
                divPointer.style.msTransform = 'rotate('+ t.willDeg +'deg)';

            },100);
            //转盘停止后操作
            setTimeout(function(){
                //未中奖显示
                if (t.prizeType == 0 || t.prizeType == 4) {
                    alert('未中奖~');
                    return false;
                } else {
                    alert('中奖了~');
                }

            },2100)
        },

    }
    win.disk = disk;
})(window)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js HTML5 Canvas绘制转盘抽奖

本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果 2.主要的内容 •html5中canvas标签的使用 •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" wi
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

需求: 最多可以抽奖5次,而且,每次只会中"2000元理财金"或者"谢谢参与",其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="play
javascript+HTML5 Canvas绘制转盘抽奖

之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h
JS旋转实现转盘抽奖效果

本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码,供大家参考,具体内容如下闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域比如,我选择了"区域2",结果就是这样具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入) HTML文件: <!DOCTYPE html> <html> <head> <meta charset=
利用Javascript实现简单的转盘抽奖

首先来看看接口说明: var _rotate = new iRotate('#div',{ start : 0, //开始角度,可不写,默认0 end :45, //结束角度 time :5000, //持续时间,可不写,默认1000 easing : 'easeOut', //动画形式,目前只有'linear'和'easeOut'两种,可不写,默认'easeOut' callback : function(){ //回调函数 //this为当前对象 } }); _rotate.stop(fu
js实现大转盘抽奖游戏实例

本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!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"> <hea
Vue.js实现大转盘抽奖总结及实现思路

大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示. 中奖结果弹窗,为抽奖组件服务. 实现步骤如下: 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息. api: export default { getPrizeList () { let priz
js实现转盘抽奖功能

本文实例为大家分享了js实现转盘抽奖功能的具体代码,供大家参考,具体内容如下效果:点击抽奖按钮,转盘开始旋转数圈后停止示例: 抽奖html代码: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q
jQuery+PHP实现微信转盘抽奖功能的方法

本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div class="demo"> <div id="disk"></div> <div
php+lottery.js实现九宫格抽奖功能

php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <script type="text/javascript" src="js/lottery.js"></script> 开始抽奖函数start_lottery() function start_lottery(){ if(flag){ //alert('正在抽奖
js实现简单抽奖功能

本文实例为大家分享了js实现简单抽奖功能的具体代码,供大家参考,具体内容如下代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ border: 1px solid aqua; height: 100px; width: 200px; text-align: center; lin
jquery转盘抽奖功能实现

一.用到的素材二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510
vue实现简单转盘抽奖功能

本文实例为大家分享了vue实现简单转盘抽奖的具体代码,供大家参考,具体内容如下样式请大家忽略(自己调),主要看JS代码实现,点击按钮后调用start方法,判断是否在转动状态,如果没转动则调用go方法,go方法主要封装了一次性定时器,是个递归函数,调用go函数后即可实现抽奖转盘的效果了,详细代码如下: 注释清晰哦 <template> <div class="home"> <button @click="start">
vue实现大转盘抽奖功能

本文实例为大家分享了vue实现大转盘抽奖的具体代码,供大家参考,具体内容如下效果图如下中奖提示代码如下 <template> <div class="dial" v-wechat-title="$route.meta.title"> <div class="times">抽奖次数{{LuckyClick}}</div>  <
Android自定义View实现QQ运动积分转盘抽奖功能

因为偶尔关注QQ运动, 看到QQ运动的积分抽奖界面比较有意思,所以就尝试用自定义View实现了下,原本想通过开发者选项查看下界面的一些信息,后来发现积分抽奖界面是在WebView中展示的,应该是在H5页面中用js代码实现的,暂时不去管它了. 这里的自定义View针对的是继承自View的情况,你可以将Canvas想象为画板, Paint为画笔,自定义View的过程和在画板上用画笔作画其实类似,想象在画板上作画的过程,你要画一个多大图形(对应View的测量 onMeasure方法),你要画什么样的图
使用jQuery Rotare实现微信大转盘抽奖功能

很多公司到了年底都会做一些抽奖活动来刺激.吸引.粘住客户,比如抽奖转盘活动. 前几天用一个jqueryRotate插件实现了转盘的效果.比起那些很炫丽的flash是稍逊点,但也基本实现了需求效果图: 实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .S
jquery实现转盘抽奖功能

实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现 google code地址:http://code.google.com/p

js实现转盘抽奖功能

相关推荐

随机推荐