asp.net+jQueryRotate开发幸运大转盘

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

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" ""><html xmlns=""><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>

我们构建自定义函数lottery(),在lottery()我们向data.php发送一个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 = -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>V参数代表百分比,默认为100,V月大代表该奖项中奖率越高,越小中奖率越小。

并且如此真实的活着——这,就是旅行的意义。

asp.net+jQueryRotate开发幸运大转盘

相关文章:

你感兴趣的文章:

标签云: