js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm
$("触发转动元素").rotate(45); //直接这样子调用的话就是变换角度$("触发转动元素").getRotateAngle(); //返回对象当前的角度$("触发转动元素").stopRotare(); //停止旋转动画$("触发转动元素").rotateRight() 向右旋转90度 $("触发转动元素").rotateLeft()向左旋转90度。
$("触发转动元素").rotate({ angle:0, //起始角度animateTo:180, //结束的角度duration:3000, //转动时间callback:function(){}, //回调函数easing:$.easing.easeOutSine // $.easing.easeInOutExpo 运动的效果,需要引用jquery.easing.min.js的文件})$("触发转动元素").rotate(45); //转动45$("触发转动元素").getRotateAngle(); //返回对象当前的角度$("触发转动元素").stopRotare(); //停止旋转动画另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。
大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度 例
一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内
二等奖 概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内
三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jQueryRotate.2.2.js"></script> <script type="text/javascript" src="jquery.easing.min.js"></script> <script type="text/javascript" src="zp.js"></script> <style type="text/css"> body {background: url(bg.png) 0 0 repeat; }.rotate-content {width: 270px;position: relative;height: 270px;background: url(activity-lottery-bg.png)no-repeat 0 0;background-size: 100% 100%;margin: 0 auto }.rotate-con-pan {background: url(disk.jpg)no-repeat 0 0;background-size: 100% 100%;position: relative;width: 255px;height: 255px;padding-top: 15px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;margin: 0 auto }.rotate-con-zhen {width: 112px;height: 224px;background: url(start.png)no-repeat 0 0;background-size: 100% 100%;margin: 0 auto }</style> </head><body><div class="rotate-content"><div class="rotate-con-pan"><div class="rotate-con-zhen"></div></div></div> </body> <script type="text/javascript"> $(function(){$(".rotate-con-zhen").rotate({bind:{click:function(){var a = runzp();$(this).rotate({duration:3000,angle: 0, animateTo:1440+a.angle,easing: $.easing.easeOutSine,callback: function(){alert(a.prize+a.message);}});}}}); }); </script> </html>
/***************************************************** Author : xuyw ** Version: v1.0 ** Email : xyw10000@163.com * ****************************************************/function randomnum(smin, smax) {// 获取2个值之间的随机数var Range = smax - smin;var Rand = Math.random();return (smin + Math.round(Rand * Range)); }function runzp() {var data = '[{"id":1,"prize":"590大洋","v":1.0},{"id":2,"prize":"100RMB","v":2.0},{"id":3,"prize":"安慰奖","v":48.0}]';// 奖项jsonvar obj = eval('(' + data + ')');var result = randomnum(1, 100);var line = 0;var temp = 0;var returnobj = "0";var index = 0;//alert("随机数"+result);for ( var i = 0; i < obj.length; i++) {var obj2 = obj[i];var c = parseFloat(obj2.v);temp = temp + c;line = 100 - temp;if (c != 0) {if (result > line && result <= (line + c)) {index = i;// alert(i+"中奖"+line+"<result"+"<="+(line + c));returnobj = obj2;break;}}}var angle = 330;var message = "";var myreturn = new Object;if (returnobj != "0") {// 有奖message = "恭喜中奖了";var angle0 = [ 344, 373 ];var angle1 = [ 226, 256 ];var angle2 = [ 109, 136 ];switch (index) {case 0:// 一等奖var r0 = randomnum(angle0[0], angle0[1]);angle = r0;break;case 1:// 二等奖var r1 = randomnum(angle1[0], angle1[1]);angle = r1;break;case 2:// 三等奖var r2 = randomnum(angle2[0], angle2[1]);angle = r2;break;}myreturn.prize = returnobj.prize;} else {// 没有message = "再接再厉";var angle3 = [ 17, 103 ];var angle4 = [ 197, 220 ];var angle5 = [ 259, 340 ];var r = randomnum(3, 5);var angle;switch (r) {case 3:var r3 = randomnum(angle3[0], angle3[1]);angle = r3;break;case 4:var r4 = randomnum(angle4[0], angle4[1]);angle = r4;break;case 5:var r5 = randomnum(angle5[0], angle5[1]);angle = r5;break;}myreturn.prize = "继续努力!";}myreturn.angle = angle;myreturn.message = message;return myreturn; }
首先 转盘的角度取决于图片,转盘的业务决定代码复杂度.望各位根据实际情况开发
js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器相关推荐
- js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码 实现功能截图 系统功能 使用技术 代码 写在最后 js框架jquery实现的幸运大转盘抽奖程序代码 本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
- asp大转盘抽奖程序代码微信大转盘asp版源码
昨天接到一个客户需求让帮忙找个asp的微信大转盘代码,我找遍全网也没找到有asp做的微信大转盘,网上基本上全是php做的大转盘,没办法受客户所托,昨晚给写了一个asp大转盘代码程序,后台设置奖项,每天 ...
- 《用JavaScript实现幸运大转盘抽奖程序》 一
前些日子开发了一个抽奖程序,这个程序百分之九十的逻辑使用JavaScript和JQuery写的,瞬间感觉能JS学到极致,也是一种境界,虽然自己继续向这种境界前进. 首先说一下这抽奖程序的大体逻辑,首先 ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断...
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
- Jquery写的幸运大转盘抽奖实例,用asp.net处理的服务器逻辑,附源码下载
[实例简介] 该幸运大转盘抽奖实例已实现服务器端的业务逻辑代码,稍加改动就可以应用实际了 文件:590m.com/f/25127180-488779229-66bbf7(访问密码:551685) [实 ...
- cocos2dx 圆盘抽奖_cocos2d编写的类似幸运大转盘抽奖源码
压缩包内容概览: cocos2d编写的类似幸运大转盘抽奖源码-帮你选择 ; 随机 ; 程序委托 ; 背高清 ; 背 ipad ; 返回 ; 默认 ; 默认@2x ; 图标-72 ; 图标@2x ; 我 ...
- PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖 PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 1 $prizes = array( 2 0 => array( 3 &q ...
- PHP做大转盘抽奖的思路,jQuery实现幸运大转盘(php抽奖程序)抽奖程序
抽奖程序有各式各样的形式,其中幸运大转盘最为常见.线上线下都有很多的使用场景. 本文结合我自己的php网站,是实现一个php抽奖程序. 下图是该抽奖程序的截图: 一般的抽奖程序主要是算法程序,界面效果 ...
- php仿京东幸运大转盘抽奖,原生js vue 抽奖插件 仿京东大转盘抽京豆(原创)...
插件描述:一个基于原生 javript vue2 vue3 的大转盘抽奖插件 更新时间:2020-11-24 00:18:54 在 vue2.x / vue3.x 中使用 方式 1:通过 import ...
最新文章
- 我也没想到 springboot + rabbitmq 做智能家居,会这么简单
- java中统计括号配对_括号配对问题(C语言或JAVA语言代码)
- 里面不仅有强悍的zhajinhuaplayer
- 使用MonoDevelop开发跨平台的应用程序
- C#特性 学习笔记(对象初始化器 匿名类型 扩展方法)
- Oracle表空间、段、区和块
- python绘图之散点图
- ubuntu18.04安装nvidia显卡驱动的正确方法
- python股票接口_python获取股票数据接口
- kindle型号查询
- 最简单的 QQ分享、微信分享、一键加QQ群 引入
- 计算机一级打字要注意什么,用键盘打字时要注意什么 怎样用键盘来练习打字...
- 双硬盘安装双系统 win7 + Ubuntu12
- Linux被熊孩子攻破了?
- 遇到 ld.lld: error: found local symbol ‘__bss_start‘ in global part of symbol table in file 错误
- 错误代码:DNS_PROBE_FINISHED_NXDOMAIN解决办法
- 【12.9~12.13周报】风雨十年成长之路
- java 剪切音乐_怎么剪切一段音乐其中的片段
- 【网络安全】SQL注入-XFF头注入
- SSR 服务端渲染与 CSR 客户端渲染