公司项目搞优惠活动,让做一个转盘抽奖的活动,转盘抽奖让他转起来 按照概率停止其实都麻烦,但是概率如果设置在前端就会很大的安全漏洞,所以无论为了安全性还是后期的维护问题都要把概率写到后台配置里然后读取配置。那么问题来了,我们需要把后台的概率结果和前端自己的转盘想对应,我的大致思路是这样的,后台返回概率结果之后,对应的可定有奖品,然后给每个奖品一个不变的标识,根据这个返回的标识我们前端进行相应的转盘指针停留的位置。我们后台鼻尖懒 他不想改接口了 就直接让我去对应配置里的奖品名字,好吧就这样算是搞完了。

var myDraw;//点击转盘方法名
var $btn = $('.turntableBox');
$('#playnum').html(playnum);
var isture = false;
var myPriceName;
var prizeValue;
if(isture == true){
$('.turntableBox').unbind("touchend",myDraw);
}else{
$('.turntableBox').bind("touchend",myDraw);
}
function zhuanpan(){
$.ajax({
type:"post",
url: "",
async:false,
data:{
account:account,
userType:userType
},
beforeSend:function(){
$('.turntableBox').unbind("touchend",myDraw);
},
success:function(data){
console.log(data);
myPriceName = data.data.prizeName;
prizeValue = data.data.prizeValue;//产品价值
localStorage.setItem("prizeValue",prizeValue);
},error:function(XMLHttpRequest, textStatus, errorThrown){
alert("转盘-"+XMLHttpRequest.status);
alert("转盘-"+XMLHttpRequest.readyState);
alert("转盘-"+textStatus);
},
complete:function(){
$('.turntableBox').bind("touchend",myDraw);
}
});

}
var clickfunc = function() {
zhuanpan();
var data = myPriceName;
if(data == '0'){
rotateFunc(18, '恭喜您获得0');
setTimeout(hongbao,6000)
}
if(data == '1'){
rotateFunc(54, '恭喜您获得1');
}
if(data == '2'){
rotateFunc(90, '恭喜您获得2!');
}
if(data == '3'){
rotateFunc(126, '恭喜您获得3!');
}
if(data == '4'){
rotateFunc(162, '恭喜您获得4');
}
if(data == '5'){
rotateFunc(198, '恭喜您获得5!');
}
if(data == '6'){
rotateFunc(234, '恭喜您获得6!');
}
if(data == '7'){
rotateFunc(270, '恭喜您获得7!');
}
if(data == '8'){
rotateFunc(306, '恭喜您获得8!');
}
if(data == '9'){
rotateFunc(342, '9!');
}

}
$btn.bind('touchend',myDraw =function(){
shareTimes();//抽奖次数
if(isture) return; // 如果在执行就退出
isture = true; // 标志为 在执行
//先判断是否登录,未登录则执行下面的函数
if(1 == 2) {
$('#playnum').html('0');
alert("请先登录");
isture = false;
} else { //登录了就执行下面
if(playnum <= 0) { //当抽奖次数为0的时候执行
// alert("对不起,您没有次数了!");
$('.myAlert').html('对不起,您没有抽奖次数!').show ().delay (1000).fadeOut ();
$('#playnum').html(0);
isture = false;
} else { //还有次数就执行
// $('.turntableBox').bind("touchend",myDraw);
playnum = playnum - 1; //执行转盘了则次数减1
if(playnum <= 0) {
playnum = 0;
}
$('#playnum').html(playnum);
clickfunc();
}
}
});

var rotateFunc = function(angle, text){
isture = true;
$btn.stopRotate();
$btn.rotate({
angle: 10,
duration: 1500, //旋转时间
animateTo: angle + 1080, //让它根据得出来的结果加上1080度旋转
callback: function() {
isture = false; // 标志为 执行完毕
$('.myAlert').html(text).show ().delay (1500).fadeOut ();
}
});

};

}

在这个程序员苦逼的年代里我们需要抱团取暖

js转盘大抽奖 自定义概率的更多相关文章

  1. [jQuery编程挑战]002:实现一个转盘大抽奖

    body { background-color: #F2F2F2; text-align: center; } .container { position: relative; width: 500p ...

  2. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  3. php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法

    php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为: ...

  4. 中奖概率算法(php 可用于刮刮卡,大转盘等抽奖算法)

    <?php //中奖概率算法(php 可用于刮刮卡,大转盘等抽奖算法) /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300, ...

  5. Node + js实现大文件分片上传基本原理及实践(一)

    _ 阅读目录 一:什么是分片上传? 二:理解Blob对象中的slice方法对文件进行分割及其他知识点 三. 使用 spark-md5 生成 md5文件 四. 使用koa+js实现大文件分片上传实践 回 ...

  6. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  7. 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

    在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...

  8. 实例--post请求,完成一个抽奖程序概率的测试

    一个web项目测试,测试抽奖概率的正确性,写了一个小代码,验证概率 post和get请求的一个工具类 package kankan_interface; import java.io.IOExcept ...

  9. Angular.js之服务与自定义服务学习笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [React Native] change port when running react native

    Two ways to do that. First, use this module to do that, https://github.com/ktonon/react-native-port- ...

  2. QQ/微信中被禁止访问的网页怎么打开

    为什么关心这种技术?因为我经常听到身边搞微商.搞微信项目的朋友都在叫苦连天,由于微信域名屏蔽.微信域名被拦截.弄得他们尸横遍野,损失的连过年回家的路费都没了,曾经的叱咤风云一下变成了今日的倒亏损.腾讯 ...

  3. 0003.5-20180422-自动化第四章-python基础学习笔记--脚本

    0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...

  4. 用JavaScript写一个简单的计算器

    本文使用js实现了一个简单的加.减.乘.除计算器. 以下是css部分代码: *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; ...

  5. Gradle Repository

    // 该init.gradle文件,请保存到${USER_HOME}/.gradle/文件夹下,如:C:\Users\Administrator\.gradle allprojects { repos ...

  6. PL/SQL数据类型

    在定义变量或常量时,必须要指定一个数据类型,PL/SQL是一种静态类型化的程序设计语言,静态类型化又称为强类型化,也就是说类型会在编译时而不是在运行时被检查,这样在编译时便能发现类型错误,以便增强程序 ...

  7. [c/c++] programming之路(31)、位运算(二)

    一.取反的高级用法 #include<stdio.h> #include<stdlib.h> //取反的作用:末位清零 取反适用于各种位数不同的数据 void main0(){ ...

  8. c语言#define用法

    01 作用域 预编译作用域限本文全局,如: a.c中定义:#define TEST 1 b.c中定义:#define TEST 2 两者编译不交叉,互不影响. 若需#define TEST作用于a.c ...

  9. Oracle索引之Btree索引

    索引介绍 日常开发中,对于数据的查询如果需要优化,常听说要加个索引.但是为什么加了索引,数据的查询就快了呢?那是不是加了索引就一定会是有效或者有利的呢? Oracle中常见有BTREE索引,位图索引和 ...

  10. cookie的认识

    cookie 概念和术语cookie,字面意思是“饼干”,源自魔术cookie(魔术cookie),这种技术已经在80年代的UNIX环境中已知并且通常用于在服务器上实现客户端的识别机制,例如例如X W ...