asp.net+jQueryRotate開發幸運大轉盤
來源：程序員人生 發布時間：2014-11-12 08:43:18 閱讀次數：2453次
在線抽獎程序在很多網站上很多，抽獎情勢多種多樣，Flash抽獎偏多，本文將給大家介紹jQuery轉盤抽獎，結合代碼實例將使用jQuery和asp.net來實現轉盤抽獎程序，為了便于理解,文章貼出實現源代碼作為分享。通過轉動轉盤指針來完成抽獎的1種抽獎情勢，根據旋轉角度來控制指針停留的位置――榮幸大轉盤。
1、先來張榮幸大抽獎效果圖
2、Default.aspx頁面代碼
<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⑻"/>
<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/http://www.vxbq.cn/jquery/⑴.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 + '
還要再來1次嗎？');
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>
我們構建自定義函數lottery()，在lottery()我們向data.php發送1個POST要求，如果成功返回中獎信息后，調用rotate插件開始轉動，轉動角度由后臺返回的角度決定，這里我們用2880+a表示轉動的角度，即指針轉動8圈+a度后停止，然后我們在單擊“開始抽獎”按鈕時調用lottery()，因而轉盤抽獎就完成。
3、data.aspx中獎邏輯代碼
<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 = ⑴;
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>
V參數代表百分比，默許為100，V月大代表該獎項中獎率越高，越小中獎率越小。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
