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 ...
随机推荐
- JavaScript 对象部署 Iterator 接口
const name = { first:"hello", last:"world", fullname: "hello world" } ...
- java生成条形码工具类
package com.runtime.extend.utils.CodeCreate;import java.awt.Color;import java.awt.Font;import java.a ...
- 关于MySQL数据库的安装和卸载
0.官网下载 https://www.mysql.com/ 选择需要的版本下载 两种安装方式,选择需要的安装包 下载 1.MySQL 5.6 for Windows 解压缩版配置安装 https:// ...
- Intellij IDEA 配置Tomcat远程调试
一.前言 在服务器端开发过程中,由于服务器环境差异导致运行结果不符合预期. 所以就需要到IDEA Debug 服务器代码.看起来貌似很高大上的事情. 今天就说说使用Intellij IDEA 配置的方 ...
- MyEclipse的JPA实现集成EasyJF+Spring
该视频是演示MyEclipse的JPA实现集成EasyJF+Spring的示例视频.演示项目很小,仅实现基本的查询功能. 演示过程中难免有误,请各位朋友热心指导! gh发给梵蒂冈地方fgh
- js左右大小变化
点左边左边变大.点右边右边大左边小 <style type="text/css"> *{ margin:0px auto; padding:0px; } #wai{ w ...
- linux 基本原则和常用命令
Linux的基本原则:1.由目的单一的小程序组成,组合小程序完成复杂的功能:2.一切皆文件:3.尽量避免捕获用户接口:4.配置文件保存为纯文本格式. CLI接口的命令提示符:#(root)$(普通用户 ...
- 2015年上海现场赛重现 (A几何, K暴力搜索)
A: 题目链接 :https://vjudge.net/contest/250823#problem/A 参考 : https://www.cnblogs.com/helenawang/p/54654 ...
- HTML5 本地缓存 window.localStorage
简单运用 html <div onclick="storage('invoice')"></div> js 设置 与 获取 function storag ...
- CAS部署在Windows上
我这里有下载好的cas.war和tomcat7,然后我在将cas.war放在tomcat目录下的webapps下,启动tomcat自动解压war包.浏览器输入http://localhost:8080 ...