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 ...
随机推荐
- python运算符和数据类型的可变性
一.运算符 计算机可以进行的运算有很多种,不只是加减乘除,它和我们人脑一样,也可以做很多运算. 种类:算术运算,比较运算,逻辑运算,赋值运算,成员运算,身份运算,位运算,今天我们先了解前四个. 算术运 ...
- 对于Java Bean的类型转换问题()使用 org.apache.commons.beanutils.ConvertUtils)
在进行与数据库的交互过程中,由数据库查询到的数据放在 map 中,由 map 到 JavaBean 的过程中可以使用 BeanUtils.populate(map,bean)来进行转换 这里要处理的问 ...
- UnzipUtil
public class UnzipUtil { private static final Logger logger = LoggerFactory.getLogger(CopyFileUtil.c ...
- Docker从零构建php-nginx-alpine镜像
虽然之前也曾用docker环境运行了一些项目,但对于镜像这块还不是很理解,且鉴于网上现成的镜像都包含太多用不到的库,所以决定从零开始构建一个自己的镜像. alpine linux为基础镜像 docke ...
- Linux基础命令---free显示内存使用
free free指令用来显示内存的使用情况,显示系统中可用和已使用的物理和交换内存的总量,以及内核使用的缓冲区.应该忽略共享内存列:它已经过时了. 此命令的适用范围:RedHat.RHEL.Ubun ...
- es7,es8
ES7新特性 ES7在ES6的基础上添加了三项内容:求幂运算符(**).Array.prototype.includes()方法.函数作用域中严格模式的变更. Array.prototype.incl ...
- kubernetes(k8s) helm安装kafka、zookeeper
通过helm在k8s上部署kafka.zookeeper 通过helm方法安装 k8s上安装kafka,可以使用helm,将kafka作为一个应用安装.当然这首先要你的k8s支持使用helm安装.he ...
- C# 创建数据库和表
using (SqlCommand command2 = new SqlCommand("CREATE TABLE bases(id int IDENTITY(1, 1) PRIMARY K ...
- post请求中body数据类型
1.application/json:json格式,如下: {"input1":"xxx","input2":"ooo" ...
- prometheus监控
一. 部署prometheus 1.1 下载 wget https://github.com/prometheus/prometheus/releases/download/v2.7.1/promet ...