js转盘大抽奖 自定义概率
公司项目搞优惠活动,让做一个转盘抽奖的活动,转盘抽奖让他转起来 按照概率停止其实都麻烦,但是概率如果设置在前端就会很大的安全漏洞,所以无论为了安全性还是后期的维护问题都要把概率写到后台配置里然后读取配置。那么问题来了,我们需要把后台的概率结果和前端自己的转盘想对应,我的大致思路是这样的,后台返回概率结果之后,对应的可定有奖品,然后给每个奖品一个不变的标识,根据这个返回的标识我们前端进行相应的转盘指针停留的位置。我们后台鼻尖懒 他不想改接口了 就直接让我去对应配置里的奖品名字,好吧就这样算是搞完了。
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转盘大抽奖 自定义概率的更多相关文章
- [jQuery编程挑战]002:实现一个转盘大抽奖
body { background-color: #F2F2F2; text-align: center; } .container { position: relative; width: 500p ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
- php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法
php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为: ...
- 中奖概率算法(php 可用于刮刮卡,大转盘等抽奖算法)
<?php //中奖概率算法(php 可用于刮刮卡,大转盘等抽奖算法) /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300, ...
- Node + js实现大文件分片上传基本原理及实践(一)
_ 阅读目录 一:什么是分片上传? 二:理解Blob对象中的slice方法对文件进行分割及其他知识点 三. 使用 spark-md5 生成 md5文件 四. 使用koa+js实现大文件分片上传实践 回 ...
- php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...
- 实例--post请求,完成一个抽奖程序概率的测试
一个web项目测试,测试抽奖概率的正确性,写了一个小代码,验证概率 post和get请求的一个工具类 package kankan_interface; import java.io.IOExcept ...
- Angular.js之服务与自定义服务学习笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 微信公众平台开发教程(一)_微信接入校验以及token获取
微信公众平台是运营者通过公众号为微信用户提供资讯和服务的平台,而公众平台开发接口则是提供服务的基础. 接入微信公众平台开发,开发者需要按照如下步骤完成: 1.填写服务器配置 2.验证服务器地址的有效性 ...
- Spring Cloud Gateway Ribbon 自定义负载均衡
在微服务开发中,使用Spring Cloud Gateway做为服务的网关,网关后面启动N个业务服务.但是有这样一个需求,同一个用户的操作,有时候需要保证顺序性,如果使用默认负载均衡策略,同一个用户的 ...
- 用一句sql语句更新两个表并可更新对应的字段的值
ACCESS 例子: insert into products (ProNumber,CASNumber,Cnname,Price,Enname,Baozhuang,Pinpai) select Pr ...
- Java面向对象概述和三大特性
Java 是面向对象的高级编程语言,类和对象是 Java 程序的构成核心.围绕着 Java 类和 Java 对象,有三大基本特性:封装是 Java 类的编写规范.继承是类与类之间联系的一种形式.而多态 ...
- 2018-2019-2 20165215《网络攻防技术》Exp6 信息搜集与漏洞扫描
目录 实验目的 实验内容 基础知识 实验步骤 (一)各种搜索技巧的应用 Google Hacking 搜索网址目录结构 搜索特定类型的文件 路由侦查 (二)DNS IP注册信息的查询 whois域名注 ...
- Java的流
Java中的流主要是用来读写文件的.只要明确你是读文件还是写文件就可以确定使用哪种流了.读:read 写:writer 1.读文件:filereader这个类,顾名思义就知道是读文件了. 2.写文 ...
- C++中的string类型转换为int类型
给定一个十进制整数n,输出n的各位数字之和 #include<iostream> #include<string> using namespace std; int main( ...
- LeetCode 链表2_27+二叉树的遍历(递归与非递归)
---恢复内容开始--- 19. 删除链表的倒数第N个节点 实现原理:设置两个指针p,q,初始时先让p走n步,之后p与q一起走,当p走到结尾的时候,删除p.next即可. public ListNod ...
- AutoCAD LT 2019 安装教程
autocad lt 2019是mac平台上一款全球领先的更快.更精确地创建二维图形设计平台,用于二维草图.图形和文档编制,广泛应用于机械设计.工业制图.工程制图.土木建筑.装饰装潢.服装加工等多个行 ...
- 什么是事务?事务特性?事务隔离级别?spring事务传播特性?
一.事务的概述 什么是事务? 在数据库中,所谓事务是指一组逻辑操作单元即一组sql语句,当这个单元中的一部分操作失败,整个事务回滚,只有全部正确才完成提交.判断事务是否配置成功的关键点在于出现异常时事 ...