標籤：nts table nat his star ota ace jquery jsb
線上抽獎程式在非常多網站上非常多，抽獎形式多種多樣。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度後停止，然後我們在單擊“開始抽獎”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
asp.net+jQueryRotate開發幸運大轉盤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
