广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js实现转盘抽奖功能
  • 604

0
分享到

js实现转盘抽奖功能

2024-04-02 19:04:59 604人浏览 安东尼
摘要

本文实例为大家分享了js实现转盘抽奖功能的具体代码，供大家参考，具体内容如下 效果：点击抽奖按钮，转盘开始旋转数圈后停止 示例： 抽奖html代码： <!DOCTYPE htm

本文实例为大家分享了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;
//                      
//                      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)';
//                      
//                      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)

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: js实现转盘抽奖功能

本文链接: https://www.lsjlt.com/news/141877.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • js实现转盘抽奖功能
    本文实例为大家分享了js实现转盘抽奖功能的具体代码，供大家参考，具体内容如下 效果：点击抽奖按钮，转盘开始旋转数圈后停止 示例： 抽奖html代码： <!DOCTYPE htm...
    99+
    2022-11-13
  • vue实现大转盘抽奖功能
    本文实例为大家分享了vue实现大转盘抽奖的具体代码，供大家参考，具体内容如下 效果图如下 中奖提示 代码如下 <template>   <div class="...
    99+
    2022-11-13
  • JS旋转实现转盘抽奖效果
    本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码，供大家参考，具体内容如下 闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并...
    99+
    2022-11-13
  • vue实现简单转盘抽奖功能
    本文实例为大家分享了vue实现简单转盘抽奖的具体代码，供大家参考，具体内容如下 样式请大家忽略（自己调），主要看JS代码实现，点击按钮后调用start方法，判断是否在转动状态，如果...
    99+
    2022-11-13
  • vue如何实现大转盘抽奖功能
    这篇文章主要为大家展示了“vue如何实现大转盘抽奖功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何实现大转盘抽奖功能”这篇文章吧。效果图如下中奖提示代码如下<template&...
    99+
    2023-06-29
  • JS+Canvas绘制抽奖转盘
    本文实例为大家分享了JS+Canvas绘制抽奖转盘的具体代码，供大家参考，具体内容如下 给大家分享一个Canvas绘制的转盘抽奖，点击开关开始转动时，转盘开始转动，转盘停止时指针指向...
    99+
    2022-11-12
  • vue怎么实现简单转盘抽奖功能
    本篇内容介绍了“vue怎么实现简单转盘抽奖功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！样式请大家忽略（自己调），主要看JS代码实现，点...
    99+
    2023-06-29
  • jquery实现九宫格大转盘抽奖功能
    本篇内容主要讲解“jquery实现九宫格大转盘抽奖功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery实现九宫格大转盘抽奖功能”吧! 一、用...
    99+
    2022-10-19
  • js实现简单抽奖小功能
    本文实例为大家分享了js实现简单抽奖小功能的具体代码，供大家参考，具体内容如下 1.场景： 点击按钮开始随机抽取奖品，当停止那刻停留在大屏幕的是抽中的奖品（“谢谢”即为没奖）。 2....
    99+
    2022-11-12
  • JS实现随机抽奖小功能
    本文实例为大家分享了JS实现随机抽奖小功能的具体代码，供大家参考，具体内容如下 点击开始按钮开始抽奖，div依次变红！下面是js代码，需要的自取 <script>    ...
    99+
    2022-11-12
  • VUE实现大转盘抽奖
    目录UI初始参考各值参考图方案分析-参数配置核心思路：关于旋转位置参数配置实现逻辑组件使用抽奖效果结语UI 老规矩，先看下静态UI，以便于有个图像概念 初始参考各值参考图 方案...
    99+
    2022-11-12
  • 使用vue怎么实现一个转盘抽奖功能
    本篇文章为大家展示了使用vue怎么实现一个转盘抽奖功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运...
    99+
    2023-06-07
  • 基于JavaScript实现轮盘抽奖功能
    目录实现步骤html代码：css代码：js代码：不知道今天自己该吃什么，一招帮你解决选择困难症。通过html+css+js实现一个轮盘抽奖功能。我们可以将平时吃的饭菜输入到代码中，每...
    99+
    2023-01-13
    js轮盘抽奖 js抽奖
  • html+css+js实现带有转盘的抽奖小程序
    html+css+js实现带有转盘的抽奖小程序 简介：html+css+js实现带有转盘的抽奖小程序。 效果展示 抽奖方式： 飞镖 飞镖制作成飞机的模样，没人的号码用黄色标签做成云朵模样黏贴在背景板上，年会背景板缓缓移动，飞扎中的名字得奖...
    99+
    2023-08-16
    javascript html css
  • Android实现抽奖转盘实例代码
    本文详述了android抽奖程序的实现方法，程序为一个抽奖大转盘代码，里面定义了很多图形方法和动画。 实现主要功能的SlyderView.java源代码如下： import ...
    99+
    2022-06-06
    抽奖转盘 Android
  • 如何实现Jquery转盘抽奖程序
    这篇文章主要介绍了如何实现Jquery转盘抽奖程序，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。基于Jquery的Javascript转盘抽...
    99+
    2022-10-19
  • 如何实现纯CSS3大转盘抽奖
    这篇文章给大家分享的是有关如何实现纯CSS3大转盘抽奖的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。HTML<section class="gb-whe...
    99+
    2022-10-19
  • java实现抽奖功能解析
    本文实例为大家分享了java实现抽奖功能的具体代码，供大家参考，具体内容如下 抽一个： 输入抽奖人数，生成随机数字进行抽奖。 比如：楼主抽幸运儿送游戏，选择前100楼抽取一个幸运儿。...
    99+
    2022-11-11
  • java实现幸运抽奖功能
    本文实例为大家分享了java实现幸运抽奖功能的具体代码，供大家参考，具体内容如下 本系统较为简单，未使用是什么多的算法，也未添加保存文件读取文件功能， 1、任务 模拟注册登录幸运抽奖...
    99+
    2022-11-13
  • java如何实现抽奖功能
    本篇内容主要讲解“java如何实现抽奖功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“java如何实现抽奖功能”吧!Java可以用来干什么Java主要应用于：1. web开发；2. Andro...
    99+
    2023-06-14
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作