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实现转盘的转 ...
随机推荐
- bzoj 4813: [Cqoi2017]小Q的棋盘 [树形背包dp]
4813: [Cqoi2017]小Q的棋盘 题意: 某poj弱化版?树形背包 据说还可以贪心... #include <iostream> #include <cstdio> ...
- BZOJ 3473: 字符串 [广义后缀自动机]
3473: 字符串 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 354 Solved: 160[Submit][Status][Discuss] ...
- 树莓派小车(三)Python控制小车
正文之前 由于最近忙于复习赶考,所以暂时没有拿起树莓派小车,直到昨天,终于空出时间来把代码整理一下来和大家分享. 正文 在树莓派小车系列之二中,讲到了树莓派的引脚定义方式有两种: PHYSICAL N ...
- Kolakoski序列产生器
/* 本程序说明: Kolakoski序列是一个仅由1和2组成的无限数列,是一种通过“自描述”来定义的数列. 他的前几项为1,2,2,1,1,2,1,2,2,1,2,2,1,1,2,1,1,2,2,1 ...
- open-falcon-agent插件使用
说明 Plugin可以看做是对agent功能的扩充.使用插件可以对采集脚本进行统一管理,方便定制修改,也可以免去在crontab中添加计划任务. 开启plugin功能 # 修改agent配置文件 &q ...
- [求助][SPOJ MARIOGAM]-高斯消元(内含标程,数据等)
小蒟蒻开始做概率的题之后,遇到了这道题,然而,他发现自己的程序调试了无数次也无法通过,系统总是返回令人伤心的WA, 于是,他决定把这一天半的时间收集到的资料放在网上, 寻求大家的帮助, 也可以节省后来 ...
- EntityFrameWork实现部分字段获取和修改(含源码)
EntityFrameWork类库,是微软推出的ORM组件,它是基于Ado.Net的,个人感觉还是非常 好用的.以下介绍的2个功能点分别是部分字段更新和获取 解决部分字段Update.本方案采用仓储模 ...
- Sqlserver将数据从一张表插入到另一张表
1.如果是整个表复制表达如下: insert into table1 select * from table2 2.如果是有选择性的复制数据表达如下: insert into table1(colum ...
- STAThread 和 MTAThread
STAThread:single threaded apartment 直译过来是:单线程单元套间 MTAThread:multiple threaded apartment 直译过来是:多线程单元套 ...
- vim+makefile入门编辑,编译,差错实例
vim+makefile入门编辑,编译,差错实例 vim makefile 编译 编写代码,一般在vim中编辑完后,输入:wq,在命令行下输入g++ hello.cc -o hello ,出现问题,打 ...