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 ...
随机推荐
- spring boot入门小案例
spring boot 入门小案例搭建 (1) 在Eclipse中新建一个maven project项目,目录结构如下所示: cn.com.rxyb中存放spring boot的启动类,applica ...
- IDE中使用System.getProperty()获取一些属性
使用环境:一般在项目首页或者项目后端配置中会使用到一些属性获取: package com.liuyc.study.utils; /** * 获取当前操作系统中或者当前环境中的一些默认配置 * @aut ...
- Jenkins - ERROR: Exception when publishing, exception message [Failure] Build step 'Send build artifacts over SSH' changed build result to UNSTABLE
今天在处理Jenkins的时候出现了一些异常,看着控制台,编译都是通过的,只是没有部署上来,查看了控制台日志,如下: 刚开始还以为是权限通道什么的,后来才发现是执行脚本根本不让执行,以前也遇到过,都是 ...
- github爬虫100项目
为了更好的巩固所学,在github上开始100爬虫项目,记录学习过程,也希望对他人的学习有帮助,目前还在持续更新中,有兴趣可以看看 地址: https://github.com/mapyJJJ/100 ...
- Dapper 批量插入
环境 Mssql 自带的Dapper.Net 批量插入 是一条条循环插入 这里改成了单条 Ps:主要此方法要控制字符串长度哦,每个数据库对单条sql字符长度的限制是不一样的. /// <summ ...
- Spring boot 源码分析(前言)
开坑达人 & 断更达人的我又回来了 翻译的坑还没填完,这次再开个新坑= = 嗯,spring boot的源码分析 本坑不打算教你怎么用spring boot = = 也不打算跟你讲这玩意多方便 ...
- CCF CSP 201609-1 最大波动
题目链接:http://118.190.20.162/view.page?gpid=T47 问题描述 试题编号: 201609-1 试题名称: 最大波动 时间限制: 1.0s 内存限制: 256.0M ...
- java第三次上机
import java.util.*; class student{ String name; char sex; int age; String number; double score[]=new ...
- MySQL5.7 并行复制的学习
MySQL 5.6 基于库级别的并行复制 MySQL5.6的并行复制是库(schema)级别的,从库为每个库(schema)分配一个线程以此来提高复制效率 在MySQL 5.6版本之前,Slave服务 ...
- sql取整数
[四舍五入取整]select round(1.1,0) 执行结果为1: [向下取整]select floor(1.1) 执行结果为2: [向上取整] select ceiling(1.1) 执行结果为 ...