在线抽奖程序在很多网站上很多，抽奖形式多种多样，Flash抽奖偏多，本文将给大家介绍jQuery转盘抽奖，结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序，为了便于理解,文章贴出实现源代码作为分享。通过转动转盘指针来完成抽奖的一种抽奖形式，根据旋转角度来控制指针停留的位置——幸运大转盘。

1、先来张幸运大抽奖效果图

2、Default.aspx页面代码

<!--
更多技术分享请看博客：http://blog.csdn.net/fuyifang
--> 
<span style="font-family:Microsoft YaHei;font-size:14px;"><%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
    <title>幸运大转盘</title>

    <style type="text/css">
     .demo{ position:relative;}
    #disk{ position:relative; z-index:1;}
    #start{ position:absolute; top:-0; z-index:9;}
    #start img{cursor:pointer; border:none;}
    </style>
    <script src="Scripts/jquery-1.7.1.min.js"  type="text/javascript"></script>
    <script src="Scripts/jQueryRotate.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#startbtn").click(function () {
                lottery();
            });
        });
        function lottery() {
            $.ajax({
                type: 'POST',
                url: 'data.aspx',
                dataType: 'json',
                cache: false,
                error: function () {
                    alert('出错了！');
                    return false;
                },
                success: function (json) {
                    $("#startbtn").unbind('click').css("cursor", "default");
                    var a = json.angle; //角度
                    var p = json.prize; //奖项
                    $("#startbtn").rotate({
                        duration: 8000, //转动时间
                        angle: 0,
                        animateTo: 2880+ a, //转动角度
                        easing: $.easing.easeOutSine,
                        callback: function () {
                            var con = confirm('恭喜你，中得' + p + '\n还要再来一次吗？');
                            if (con) {
                                lottery();
                            } else {
                                $("#startbtn").click(function () {
                                    lottery();
                                }).css("cursor", "pointer");
                                return false;
                            }
                        }
                    });
                }
            });
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
   <div>
        <div class="demo">
            <div id="disk"><img src="img/disk.jpg" width="100%" style="max-width:640px;"/></div>
            <div id="start"><a href="###"><img src="img/start.png" id="startbtn" width="100%" style="max-width:640px;"/></a></div>
       </div>

    </div>

    </form>
</body>
</html>
 </span>
<!--
更多技术分享请看博客：http://blog.csdn.net/fuyifang
--> 

我们构建自定义函数lottery()，在lottery()我们向data.php发送一个POST请求，如果成功返回中奖信息后，调用rotate插件开始转动，转动角度由后台返回的角度决定，这里我们用2880+a表示转动的角度，即指针转动8圈+a度后停止，然后我们在单击“开始抽奖”按钮时调用lottery()，于是转盘抽奖就完成。

3、data.aspx中奖逻辑代码

<!--
更多技术分享请看博客：http://blog.csdn.net/fuyifang
--> 
<span style="font-family:Microsoft YaHei;font-size:14px;">using System;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class data : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Hashtable ht = new Hashtable();
        Hashtable p1 = new Hashtable();
        p1.Add("id", 1);
        p1.Add("min", 1);
        p1.Add("max", 59);
        p1.Add("prize", "500积分");
        p1.Add("v", 1);
        ht.Add(0, p1);

        Hashtable p2 = new Hashtable();
        p2.Add("id", 2);
        p2.Add("min", 60);
        p2.Add("max", 119);
        p2.Add("prize", "100积分");
        p2.Add("v", 5);
        ht.Add(1, p2);

        Hashtable p3 = new Hashtable();
        p3.Add("id", 3);
        p3.Add("min", 121);
        p3.Add("max", 179);
        p3.Add("prize", "10元商品");
        p3.Add("v", 5);
        ht.Add(2, p3);

        Hashtable p4 = new Hashtable();
        p4.Add("id", 4);
        p4.Add("min", 180);
        p4.Add("max", 240);
        p4.Add("prize", "500积分");
        p4.Add("v", 10);
        ht.Add(3, p4);

        Hashtable p5 = new Hashtable();
        p5.Add("id", 5);
        p5.Add("min", 240);
        p5.Add("max", 300);
        p5.Add("prize", "谢谢参与");
        p5.Add("v", 80);
        ht.Add(4, p5);

        Hashtable p6 = new Hashtable();
        p6.Add("id", 6);
        p6.Add("min", 300);
        p6.Add("max", 360);
        p6.Add("prize", "订单免单");
        p6.Add("v", 1);
        ht.Add(5, p6);

        //Hashtable p7 = new Hashtable();
        //p7.Add("id", 7);
        //p7.Add("min", new int[6] { 32, 92, 152, 212, 272, 332 });
        //p7.Add("max", new int[6] { 58, 118, 178, 238, 298, 358 });
        //p7.Add("prize", "谢谢参与");
        //p7.Add("v", 50);
        //ht.Add(6, p7);

        //Console.WriteLine(ht[0]);
        int htlength = ht.Count;
        int[] proArr = new int[htlength];
        foreach(DictionaryEntry single in ht)
        {
            Hashtable subObj = single.Value as Hashtable;
            proArr[(int)single.Key] = (int)subObj["v"];
        }

        int rid = this.getRand(proArr);
        int jiaodu = 0;
        string prize = null;
        Hashtable res = ht[rid] as Hashtable;
        Random ran = new Random();

        if ((int)res["id"] == 7)
        {
            int[] mins = (int[])res["min"];
            int[] maxs = (int[])res["max"];
            int i = ran.Next(0, 5);
            jiaodu = ran.Next(mins[i], maxs[i]);
        }
        else
        {
            int mins = (int)res["min"];
            int maxs = (int)res["max"];
            jiaodu = ran.Next(mins, maxs);
        }

        prize = res["prize"].ToString();

        string json = "{\"angle\":" + jiaodu.ToString() + ",\"prize\":\"" + prize + "\"}";
        Response.Write(json);
        //Dictionary<string, Dictionary<string,string>> dt = new Dictionary<string, Dictionary<string,string>>();
    }

    public int getRand(int[] proArr)
    {
        int result = -1;
        int proSum = 0;
        foreach(int val in proArr)
        {
            proSum += val;
        }
        int length = proArr.Length;
        for (int i = 0; i < length; i++)
        {
            Random ran = new Random();
            int ranNum = ran.Next(1, proSum);
            if (ranNum <= proArr[i])
            {
                result = i;
                break;
            }
            else
            {
                proSum -= proArr[i];
            }
        }
        return result;
    }

}</span>
<!--
更多技术分享请看博客：http://blog.csdn.net/fuyifang
--> 

V参数代表百分比，默认为100，V月大代表该奖项中奖率越高，越小中奖率越小。

更多关注付义方技术博客：http://blog.csdn.net/fuyifang

asp.net+jQueryRotate开发幸运大转盘的更多相关文章

  1. PHP+AJAX开发幸运大转盘抽奖

    PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...

  2. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  3. PHP幸运大转盘源码，支持ThinkPHP

    原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...

  4. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  5. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  6. Vue 幸运大转盘

    转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不 ...

  7. 跟我一起学编程—《Scratch编程》第24课：幸运大转盘

    同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...

  8. 利用jQueryRotate旋转插件开发大转盘抽奖

    前言: 公司原来开发大转盘抽奖活动用的是flash 我发现swf文件竟然有6m大,吓尿了! 其实完全可以用js写的,但是自身前端功力有限,且时间紧迫,所以直接用旋转插件就好,兼容各方面都可以保证. 1 ...

  9. 幸运大转盘-jQuery+PHP实现的抽奖程序

    目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...

随机推荐

  1. iOS设备唯一标识的前世今生

    设备唯一标识 估计很多开发都有被要求过获取一下设备的唯一标识,获取设备的唯一标识经常使用在我们做统计或者是在保证一台设备登录亦或者是做IM的时候可能会考虑去使用它,这一次在自己的需求当中就有一个&qu ...

  2. 关于C#连接Oracle数据库 尝试加载Oracle客户端时引发BadImageFormatException 如果在安装32位Oracle客户端组件的情况下以64位模式运行，将出现此问题

    这个问题已经困扰了我快一个月了,各种百度,各种博客,可是,一个个都试过了,什么下载32位客户端,配置环境变量什么的,纯属扯犊子,开发环境win10 64位    oracle 11g r2 64位,这 ...

  3. springboot(二十)：使用spring-boot-admin对spring-boot服务进行监控

    上一篇文章<springboot(十九):使用Spring Boot Actuator监控应用>介绍了Spring Boot Actuator的使用,Spring Boot Actuato ...

  4. wireshark抓包图解 TCP三次握手/四次挥手详解[转]

    原文链接:http://www.seanyxie.com/wireshark%E6%8A%93%E5%8C%85%E5%9B%BE%E8%A7%A3-tcp%E4%B8%89%E6%AC%A1%E6% ...

  5. 策略模式(Strategy Method)

    策略模式可以看做“可插入式算法(Pluggable)”,将子类各自的行为和公共的逻辑分离开来,将子类的行为抽象为算法插入到公共的逻辑中,这样替换子类的行为也不会对公共逻辑产生影响,也不会影响到调用类的 ...

  6. BZOJ 1426: 收集邮票 [DP 期望 平方]

    传送门 题意: 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由于凡凡也很喜欢邮 ...

  7. bind,apply,call区别总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 数据分析之pandas教程-----概念篇

    目录 1  pandas基本概念 1.1  pandas数据结构剖析 1.1.1  Series 1.1.2  DataFrame 1.1.3  索引 1.1.4  pandas基本操作 1.1.4. ...

  9. 使用VS Code开发asp.net core (下)

    第一部分: https://www.cnblogs.com/cgzl/p/8450179.html 本文是基于Windows10的. Debugging javascript 打开wwwroot/js ...

  10. MySQL对sum()字段 进行条件筛选，使用having，不能用where

    显示每个地区的总人口数和总面积．仅显示那些面积超过1000000的地区. SELECT region, SUM(population), SUM(area) FROM bbc GROUP BY reg ...