抽奖转盘

最新推荐文章于 2024-04-09 15:55:50 发布
最新推荐文章于 2024-04-09 15:55:50 发布
阅读量2.3k 收藏 2
点赞数 1
分类专栏： 网页框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014421556/article/details/51967836
版权 
<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
        <title>转盘抽奖</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
                font-size: 16px;
                font-family: "Microsoft YaHei";
            }

            .turnplate_box {
                width: 300px;
                height: 300px;
                margin: 100px auto;
                position: relative;
                border: 1px solid red;
            }

            .turnplate_box canvas {
                position: absolute;
                border: 1px solid yellow;
            }

            #myCanvas {
                background-color: white;
                border-radius: 100%;
            }

            #myCanvas01,
            #myCanvas03 {
                left: 50px;
                top: 50px;
                z-index: 30;

            }

            #myCanvas02 {
                left: 75px;
                top: 75px;
                z-index: 20; 
            }

            #myCanvas {
                -o-transform: transform 6s;
                -ms-transform: transform 6s;
                -moz-transform: transform 6s;
                -webkit-transform: transform 6s;
                transition: transform 6s;
                -o-transform-origin: 50% 50%;
                -ms-transform-origin: 50% 50%;
                -moz-transform-origin: 50% 50%;
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
            }

            .turnplatw_btn {
                width: 60px;
                height: 60px;
                left: 120px;
                top: 120px;
                border-radius: 50%;
                position: absolute;
                cursor: pointer;
                border: none;
                background: transparent;
                outline: none;
                z-index: 40;
                border: 1px solid red;
            }
        </style>


        <script type="text/javascript">
            $(document).ready(function() {
                //旋转角度
                var angles;
                //可抽奖次数
                var clickNum = 5;
                //旋转次数
                var rotNum = 0;
                //中奖公告
                var notice = null;
                //转盘初始化

                var color = ["red", "green", "blue", "darkblue", "black", "yellow"];//转盘，转盘，内园，字颜色，开始抽奖颜色，开始抽奖背景颜色
                var info = ["谢谢参与", "  1000", "   10", "  500", "  100", " 4999", "    1", "   20"];
                var info1 = ['再接再厉', '      元', '    万元', '  淘金币', '  万美元', '  淘金币', '  日游(月球)', '  个美女']
                canvasRun();
                $('#tupBtn').bind('click', function() {
                    alert(1);
                    if (clickNum >= 1) {
                        //可抽奖次数减一
                        clickNum = clickNum - 1;
                        //转盘旋转
                        runCup();
                        //转盘旋转过程“开始抽奖”按钮无法点击
                        $('#tupBtn').attr("disabled", true);
                        //旋转次数加一
                        rotNum = rotNum + 1;
                        //“开始抽奖”按钮无法点击恢复点击
                        setTimeout(function() {
                            alert(notice);
                            $('#tupBtn').removeAttr("disabled", true);
                        }, 6000);
                    } else {
                        alert("亲，抽奖次数已用光！");

                    }
                });
                //转盘旋转
                function runCup() {
                    probability();
                    var degValue = 'rotate(' + angles + 'deg' + ')';
                    $('#myCanvas').css('-o-transform', degValue); //Opera
                    $('#myCanvas').css('-ms-transform', degValue); //IE浏览器
                    $('#myCanvas').css('-moz-transform', degValue); //Firefox
                    $('#myCanvas').css('-webkit-transform', degValue); //Chrome和Safari
                    $('#myCanvas').css('transform', degValue);
                }
                //各奖项对应的旋转角度及中奖公告内容
                function probability() {
                    //获取随机数
                    var num = parseInt(Math.random() * (7 - 0 + 0) + 0);
                    //概率
                    if (num == 0) {
                        angles = 2160 * rotNum + 1800;
                        notice = info[0] + info1[0];
                    }
                    //概率
                    else if (num == 1) {
                        angles = 2160 * rotNum + 1845;
                        notice = info[7] + info1[7];
                    }
                    //概率
                    else if (num == 2) {
                        angles = 2160 * rotNum + 1890;
                        notice = info[6] + info1[6];
                    }
                    //概率
                    else if (num == 3) {
                        angles = 2160 * rotNum + 1935;
                        notice = info[5] + info1[5];
                    }
                    //概率
                    else if (num == 4) {
                        angles = 2160 * rotNum + 1980;
                        notice = info[4] + info1[4];
                    }
                    //概率
                    else if (num == 5) {
                        angles = 2160 * rotNum + 2025;
                        notice = info[3] + info1[3];
                    }
                    //概率
                    else if (num == 6) {
                        angles = 2160 * rotNum + 2070;
                        notice = info[2] + info1[2];
                    }
                    //概率
                    else if (num == 7) {
                        angles = 2160 * rotNum + 2115;
                        notice = info[1] + info1[1];
                    }
                }
                //绘制转盘
                function canvasRun() {
                    var canvas = document.getElementById('myCanvas');
                    var canvas01 = document.getElementById('myCanvas01');
                    var canvas03 = document.getElementById('myCanvas03');
                    var canvas02 = document.getElementById('myCanvas02');
                    var ctx = canvas.getContext('2d');
                    var ctx1 = canvas01.getContext('2d');
                    var ctx3 = canvas03.getContext('2d');
                    var ctx2 = canvas02.getContext('2d');
                    createCircle();
                    createCirText();
                    initPoint();
                    //外圆
                    function createCircle() {
                        var startAngle = 0; //扇形的开始弧度
                        var endAngle = 0; //扇形的终止弧度
                        //画一个8等份扇形组成的圆形
                        for (var i = 0; i < 8; i++) {
                            startAngle = Math.PI * (i / 4 - 1 / 8);
                            endAngle = startAngle + Math.PI * (1 / 4);
                            ctx.save();
                            ctx.beginPath();
                            ctx.arc(150, 150, 100, startAngle, endAngle, false);
                            ctx.lineWidth = 120;
                            if (i % 2 == 0) {
                                ctx.strokeStyle = color[0];
                            } else {
                                ctx.strokeStyle = color[1];
                            }
                            ctx.stroke();
                            ctx.restore();
                        }
                    }
                    //各奖项
                    function createCirText() {
                        ctx.textAlign = 'start';
                        ctx.textBaseline = 'middle';
                        ctx.fillStyle = color[3];
                        var step = 2 * Math.PI / 8;
                        for (var i = 0; i < 8; i++) {
                            ctx.save();
                            ctx.beginPath();
                            ctx.translate(150, 150);
                            ctx.rotate(i * step);
                            ctx.font = " 20px Microsoft YaHei";
                            ctx.fillStyle = color[3];
                            ctx.fillText(info[i], -30, -115, 60);
                            ctx.font = " 14px Microsoft YaHei";
                            ctx.fillText(info1[i], -30, -95, 60);
                            ctx.closePath();
                            ctx.restore();
                        }
                    }

                    function initPoint() {
                        //箭头指针
                        ctx1.beginPath();
                        ctx1.moveTo(100, 24);
                        ctx1.lineTo(90, 62);
                        ctx1.lineTo(110, 62);
                        ctx1.lineTo(100, 24);
                        ctx1.fillStyle = color[5];
                        ctx1.fill();
                        ctx1.closePath();
                        //中间小圆
                        ctx3.beginPath();
                        ctx3.arc(100, 100, 40, 0, Math.PI * 2, false);
                        ctx3.fillStyle = color[5];
                        ctx3.fill();
                        ctx3.closePath();
                        //小圆文字
                        ctx3.font = "Bold 20px Microsoft YaHei";
                        ctx3.textAlign = 'start';
                        ctx3.textBaseline = 'middle';
                        ctx3.fillStyle = color[4];
                        ctx3.beginPath();
                        ctx3.fillText('开始', 80, 90, 40);
                        ctx3.fillText('抽奖', 80, 110, 40);
                        ctx3.fill();
                        ctx3.closePath();
                        //中间圆圈
                        ctx2.beginPath();
                        ctx2.arc(75, 75, 75, 0, Math.PI * 2, false);
                        ctx2.fillStyle = color[2];
                        ctx2.fill();
                        ctx2.closePath();
                    }
                }
            });
        </script>
    </head>

    <body>
        <div class="turnplate_box">
            <canvas id="myCanvas" width="300px" height="300px">抱歉！浏览器不支持。</canvas>
            <canvas id="myCanvas01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
            <canvas id="myCanvas03" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
            <canvas id="myCanvas02" width="150px" height="150px">抱歉！浏览器不支持。</canvas>
            <button id="tupBtn" class="turnplatw_btn"></button>
        </div>
        <!-- 更改系统默认弹窗 -->
        <script type="text/javascript">
            window.alert = function(str) {
                var shield = document.createElement("DIV");
                shield.id = "shield";
                shield.style.position = "absolute";
                shield.style.left = "50%";
                shield.style.top = "50%";
                shield.style.width = "280px";
                shield.style.height = "150px";
                shield.style.marginLeft = "-140px";
                shield.style.marginTop = "-110px";
                shield.style.zIndex = "25";
                var alertFram = document.createElement("DIV");
                alertFram.id = "alertFram";
                alertFram.style.position = "absolute";
                alertFram.style.width = "280px";
                alertFram.style.height = "150px";
                alertFram.style.left = "50%";
                alertFram.style.top = "50%";
                alertFram.style.marginLeft = "-140px";
                alertFram.style.marginTop = "-110px";
                alertFram.style.textAlign = "center";
                alertFram.style.lineHeight = "150px";
                alertFram.style.zIndex = "300";
                strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
                strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[中奖提醒]</li>\n";
                strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">" + str + "</li>\n";
                strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" οnclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n";
                strHtml += "</ul>\n";
                alertFram.innerHTML = strHtml;
                document.body.appendChild(alertFram);
                document.body.appendChild(shield);
                this.doOk = function() {
                    alertFram.style.display = "none";
                    shield.style.display = "none";
                }
                alertFram.focus();
                document.body.onselectstart = function() {
                    return false;
                };
            }
        </script>
    </body>

</html>


想跌破记忆寻找你
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
转盘抽奖系统
qq_46146030的博客
10-14 541
1.创建一个Web Project项目 2.创建一个jsp，完成登陆页面，如下图所示 3.创建一个servlet，如果登录成功则跳转到抽奖页面，否则跳转回的登录页面重新登陆，如下图所示 4.完成抽奖页面的书写，其中重点是生成随机数，如下图所示 而后通过获取的随机数，从而在页面中显示出抽奖结果，如下图所示 5.运行结果如下 ...
抽奖大转盘2.0
我想养只猫
06-29 388
这个转盘动画更加的真实,添加了指针动画,类似炉石匹配时那个随着转盘转,打到指针让指针动起来的效果,由于图片大小限制,录制的帧率控制的很低,展示效果不是很理想 大致思路:这个转盘每格是等分的,所以只需要知道最终停留的id(1~10)位置,然后获取到对应角度 动画分启动加速,匀速,缓慢停止三个阶段,都是用差值来实现缓动效果的,其他细节直接看代码吧 using System.Collections; using System.Collections.Generic; using UnityEngi
微信小程序实现转盘抽奖
Zmikoo学习之路
04-09 6009
<!--pages/component/lottery/lottery.wxml--> <view class="canvas-container"> <view animation="{{animationData}}" class="gb-wheel-content" style='width:{{size-2}}rpx;height:{{size}}rpx...
抽奖转盘，原生js，canvas绘制
m0_46978096的博客
09-14 315
原生js写的抽奖转盘，可以控制指定商品的抽取概率 样式高度自适应，不过最多只能分十份，只需要改变productInformation里面的数量就行！！！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" conte
Css如何优雅的实现抽奖转盘
白玉梁的专栏
04-26 3404
如图，抽奖转盘，可以拆分为几部分：1.底部大圆； 2.中间小圆； 3.扇形区； 4.扇形内部奖品区； 5.抽奖按钮； 6.点击抽奖按钮时旋转动效及逻辑；这其中，扇形区，以及扇形区内奖品的布局最为关键和麻烦，这个问题解决，剩下的问题，那都不是事儿！那如何用Css优雅的实现呢？——最关键的就是扇形区的绘制！这里用到css的两个关键属性：rotate skewY；旋转和倾斜；首先我们先来绘制一个扇形：步骤：1.先画一个圆形：css代码： 2.在圆形上，再画一个同大小的正方形，并将正方形左下角与圆心对齐，为了区分
HTML实现转盘抽奖的简单通用模板
z2141830440的博客
11-29 2382
基本需求分析有一个由九个小正方形组成的大正方形，类似与一个3*3的矩阵，其中，最中间的小正方形颜色不同用于区分。为了实现抽奖的效果，我将外层的八个小正方形作为我的抽奖格，其中八个抽奖格中应该有一个格子的颜色不同于其他七个格子，用来表示当前抽中的物品，每次打开网页时，这个物品的位置应该是随机的当我开始抽奖时，这个被抽中的物品的颜色就会变成和其他七个格子的颜色一样，它相邻的一个格子的颜色则变为它原本的颜色就这样不停的变换，达到一个类似“动态”的效果，最后随机停在某个格子后就不再变换，表示为抽中的物品。
html canvas抽奖,HTML5 Canvas圆盘抽奖应用（适用于Vue项目）
weixin_30864831的博客
06-25 232
HTML5 Canvas圆盘抽奖应用DEMO演示*{padding:0px;margin:0px;font-size:16px;font-family:"Microsoft YaHei";}.xttblog_box{width:300px;height:300px;margin:100px auto;position:relative;}.xttblog_box canvas{position:a...
android 自定义抽奖转盘
08-04
本教程将深入探讨如何实现一个自定义抽奖转盘功能，类似于小程序或网页中的常见抽奖插件。 首先，我们需要理解Android视图系统的工作原理。在Android中，我们可以继承`View`或者`ViewGroup`来创建自定义视图。对于...
js抽奖转盘实现方法分析
10-15
抽奖转盘是一个很受欢迎的元素，可用于游戏、活动促销等场景。本文将详细介绍如何使用JavaScript来实现一个基本的抽奖转盘功能。 ### 知识点概述 1. **抽奖转盘原理**： 抽奖转盘基本上是一个圆形旋转界面，被...
抽奖转盘-幸运大转盘-uniapp-项目源码
12-30
这是一个uniapp应用项目源码完整，是个抽奖转盘的游戏插件，幸运大转盘，可添加各种奖品图片和名称，通过HBuilder X开发工具选uniapp方式打开，uniapp项目可编译发行跨端应用（包括了各种小程序以及APP），可编译...
转盘抽奖，可以自定义奖品
11-24
转盘抽奖游戏，可以自定义奖品，可以设定概率。js和html编写，无需后台代码
转盘网页抽奖代码
08-22
年会，活动抽奖网页模板
轮盘抽奖-含源码(C++,Gdi+)
01-23
VS2010的项目工程，C++编程语言，MFC可视化框架，以及运用Gdi+编写的不规则图形界面的抽奖程序，支持内定
Python简易滚动抽奖界面程序
01-22
使用Tkinter —— Python 的标准 GUI 库， 实现简易幸运转盘式抽奖界面。
小程序抽奖大转盘／九宫格抽奖
03-05
基本实现功能 1，小程序仿天猫超市大转盘 2，九宫格转盘抽奖 3，积分抽奖 4，抽到的积分随机生成 5，抽奖结果可以同步到服务器（小程序云开发后台）
Android 制作抽奖转盘 源码实例
12-04
在Android开发中，制作抽奖转盘是一项常见的需求，特别是在开发具有互动性和娱乐性的应用时。本实例源码主要展示了如何利用Android的SurfaceView组件来实现一个动态、流畅的抽奖转盘效果。SurfaceView是Android系统...
iOS 抽奖转盘
11-20
在iOS开发中，创建一个抽奖转盘是一种常见的需求，它能为用户带来互动性和趣味性。这个"iOS 抽奖转盘" demo是专为此目的设计的，它可以帮助开发者快速理解和实现转盘抽奖功能。下面将详细介绍这个项目的核心知识点。...
OpenHarmony开发实战：自定义抽奖转盘（JS）
最新发布
shudaoshanQAQ的博客
04-09 1291
本篇Codelab是基于画布组件、动画样式，实现的一个自定义抽奖圆形转盘
微信小程序之转盘抽奖
weixin_52872685的博客
12-04 1298
快速实现一个小程序的转盘抽奖，嘎嘎快，很适合拿来做毕设
抽奖转盘json格式
02-28
抽奖转盘的JSON格式可以根据具体需求进行设计，以下是一个简单的示例： ```json { "title": "幸运大转盘", "description": "参与抽奖，赢取丰厚奖品！", "sections": [ { "label": "一等奖", "probability": ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值