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 + '\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开发幸运大转盘的更多相关文章
- PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- PHP幸运大转盘源码，支持ThinkPHP
原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
- Vue 幸运大转盘
转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不 ...
- 跟我一起学编程—《Scratch编程》第24课：幸运大转盘
同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...
- 利用jQueryRotate旋转插件开发大转盘抽奖
前言: 公司原来开发大转盘抽奖活动用的是flash 我发现swf文件竟然有6m大,吓尿了! 其实完全可以用js写的,但是自身前端功力有限,且时间紧迫,所以直接用旋转插件就好,兼容各方面都可以保证. 1 ...
- 幸运大转盘-jQuery+PHP实现的抽奖程序
目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...
随机推荐
- ThinkPHP删除栏目（多）
前段时间发表了一个删除栏目的随笔,当时实现的功能是删除一条信息,这次来实现一下批量删除栏目. 我们需要达到的是这样一个效果: 选中批量删除按钮后可以选中所有该页面的栏目,这个是前端页面的实现,在这里就 ...
- ------ 解析因内核栈溢出导致的 “double fault” 蓝屏 ------
-------------------------------------------------------------------------- 前一篇指出 tail_recursivef_fac ...
- docker-compose快速搭建lnmp+redis服务器环境
因为我用的是MacOS 安装docker sudo yum update sudo tee /etc/yum.repos.d/docker.repo <<-'EOF' [dockerrep ...
- web前端 ajax请求上传图片数据类型处理
form: function (url, paras, files, success) {//上传的文件类型是MultipartFile[]//如果把需要的参数直接传入,则会请求错误//设置请求参数的 ...
- ThinkPHP的使用
在public目录下使用命令行执行:php -S localhost:8888 route.php 无需使用服务器就可启动
- CentOS安装JDK 8
准备工作 首先,更新包: yum update 检查服务器上是否已安装旧版本的Java: java -version 如果有旧版本的Java则移除: yum remove java-1.6.0-ope ...
- 从Vue.js源码角度再看数据绑定
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- [bzoj3998][TJOI2015]弦论-后缀自动机
Brief Description 给定一个字符串, 您需要求出他的严格k小子串或非严格k小子串. Algorithm Design 考察使用后缀自动机. 首先原串建SAM, 然后如果考察每个状态代表 ...
- Android Camera 摄像 demo
google 在Android 5.0推出 Camera2 这个类,用于替换 Camera,但是Camera2要求android sdk 最低版本为 minSdkVersion = 21 ...
- CSS布局(一) 盒子模型
一.盒子模型 标准盒子模型 从下图可以看到标准 w3c 盒子模型的范围包括 content.padding.border.margin,并且 content 部分不包含其他部分. 怪异盒子模型 从下图 ...