zoukankan      html  css  js  c++  java
  • asp.net+jQueryRotate开发幸运大转盘

    在线抽奖程序在非常多站点上非常多,抽奖形式多种多样。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 + '
    还要再来一次吗?');
                                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-640px;"/></div>
                <div id="start"><a href="###"><img src="img/start.png" id="startbtn" width="100%" style="max-640px;"/></a></div>
           </div>
    
        </div>
    
        </form>
    </body>
    </html>
     </span>
    <!-- 
    很多其它技术分享请看博客:http://blog.csdn.net/fuyifang 
    -->  
    

    我们构建自己定义函数lottery()。在lottery()我们向data.php发送一个POST请求。假设成功返回中奖信息后,调用rotate插件開始转动,转动角度由后台返回的角度决定,这里我们用2880+a表示转动的角度,即指针转动8圈+a度后停止,然后我们在单击“開始抽奖”button时调用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


  • 相关阅读:
    sed command
    【Python3】作用域(局部变量、全局变量)
    【Python3】函数与参数
    【Python3】编程范式
    【Python3】字符解码与编码
    【Python3】文件操作
    【Python3】集合
    【Python3】目录
    【Python3】字典
    【Python3】字符串操作
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/7008239.html
Copyright © 2011-2022 走看看