微信开发中如何实现大转盘功能
创始人
2024-11-22 22:21:39
0次
一、使用
1. 新建一个大转盘的活动：
2. 奖项设置
3. 保存后，在微信里给公众号发一个“大转盘”的消息， 就会收到大转盘的内容
4. 点击进入大转盘活动，然后点击中间的 “点击抽奖”：
二、实现
1. 页面
1.1 前台代码
<% if (ErrLevel < 100)
{
Response.Write(ErrorInfo);
}
else if (ErrLevel == 101)
{ //活动已结束，跳转到结束页面
%>
window.location.href = "end.aspx?wid="+<%=wid%>+"&aid="+<%=aid%>+"&openid="+<%=openid%>+";";
<%
}
else
{ %>
幸运大转盘抽奖
-.png">
恭喜你中奖了
你中了：
兑奖SN码：
恭喜你中奖了
你中了：
兑奖sn码为：
你已经兑奖成功，本SN码自定作废!
奖项设置：
活动说明：
本次活动每天可以转
次,总共可以转
次 你已经转了
次
var thisurl= document.URL;
var wid = <%=wid%>;
var aid =<%=aid%>;
var status = $("#hidStatus").val();
var showInfo = $("#hidErrInfo").val();
var openid ="<%=openid%>";
var jxname="";
var jpname="";
var cjtip="";
var zhuantimes=parseInt( $("#zhuantimes").text());
var zjl = false;//没中奖为false中奖为true
<% if (isZhJing)
{ %>
$("#outercont").hide();
$("#result").show();
<%} %>
if (status == "2") {
$("#outercont").hide();
}
else if(status=="100")
{
$("#outercont").hide();
$("#result").hide();
$("#zjl").show();
}
$(function () {
window.requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60)
}
})();
var totalDeg = 360 * 3 + 0;
var steps = [];
var lostDeg = [360];
var prizeDeg = <%=shuzu%>;
var prize, sncode;
var count = 0;
var now = 0;
var a = 0.01;
var outter, inner, timer, running = false;
function countSteps() {
var t = Math.sqrt(2 * totalDeg / a);
var v = a * t;
for (var i = 0; i < t; i++) {
steps.push((2 * v * i - a * i * i) / 2)
}
steps.push(totalDeg)
}
function step() {
// alert('rotate(' + steps[now++] + 'deg)');
outter.style.webkitTransform = 'rotate(' + steps[now++] + 'deg)';
outter.style.MozTransform = 'rotate(' + steps[now++] + 'deg)';
if (now < steps.length) {
running = true;
requestAnimFrame(step)
} else {
running = false;
setTimeout(function () {
$("#zhuantimes").text(++zhuantimes);
if (zjl) {
$("#sncode").text(sncode);
$("#jpsn").text(sncode);
$("#jiangping").text(jxname+" "+jpname);
$("#prizetype").text(jxname+" "+jpname);
$("#zjl").slideToggle(500);
$("#outercont").slideUp(500)
}
else
{
alert(cjtip);
}
},
200)
}
}
function start(deg) {
deg = deg || lostDeg[parseInt(lostDeg.length * Math.random())];
running = true;
clearInterval(timer);
totalDeg = 360 * 5 + deg;
steps = [];
now = 0;
countSteps();
requestAnimFrame(step)
}
window.start = start;
outter = document.getElementById('outer');
inner = document.getElementById('inner');
i = 10;
$("#inner").click(function () {
if (status == "2") {
alert(showInfo);
}
if (running) return;
$.ajax({
url: "dzpAct.ashx",
dataType: "json",
data: {
openid: openid,
myact: "choujiang",
aid: aid,
wid:wid,
rad: Math.random()
},
beforeSend: function () {
running = true;
timer = setInterval(function () {
i += 5;
outter.style.webkitTransform = 'rotate(' + i + 'deg)';
outter.style.MozTransform = 'rotate(' + i + 'deg)'
},
1)
},
success: function (data) {
if (data.error == "sys" ||data.error == "nostart" ) {
cjtip=data.content;
count = 100;
clearInterval(timer);
return
}
else if(data.error=="notimes")
{
cjtip=data.content;
start();
}
else if (data.error=="succ") {
zjl=true;
cjtip=data.content;
prize = data.sortid;
sncode = data.sn;
jpname=data.jpname;
jxname=data.jxname;
$("#hidAwardId").val(data.uid);
start(prizeDeg[data.sortid - 1])
}
else {
cjtip=data.content;
start()
}
running = false;
count++
},
error: function () {
prize = null;
start();
running = false;
count++
},
timeout: 1000
})
})
});
$("#save-btn").bind("click",
function () {
var btn = $(this);
var tel = $("#tel").val();
var pwd = "";
var hidAwardId = $("#hidAwardId").val();
if ($("#parssword").length>0 && $.trim($("#parssword").val()) == "") {
alert("请输入兑奖密码!");
return
}
if ($.trim(tel) == "") {
alert("请输入手机号!");
return
}
if($("#parssword").length>0){
pwd= $("#parssword").val();
}
var rad = Math.random();
var submitData = {
id: hidAwardId,
aid: aid,
pwd: pwd,
snumber:$("#sncode").text(),
tel: tel,
rad: rad,
openid:openid
};
$.post('dzpAct.ashx?myact=update', submitData,
function (data) {
if (data.success == "1") {
alert("提交成功！");
$("#result").slideToggle(500);
$("#zjl").slideToggle(500);
$("#outercont").slideUp(500);
} else {
alert(data.msg);
}
},
"json")
});
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
window.shareData = {
"imgUrl": "",
"timeLineLink": thisurl + "&is_share=1",
"sendFriendLink": thisurl + "&is_share=1",
"weiboLink": thisurl + "&is_share=1",
"tTitle": "<%=dzpAction.actName%>",
"tContent": "请关注后，再来抽奖。<%=dzpAction.brief%>",
"fTitle": "请关注后，再来抽奖。<%=dzpAction.actName%>",
"fContent": "请关注后，再来抽奖。<%=dzpAction.brief%>",
"wContent": "请关注后，再来抽奖。<%=dzpAction.brief%>"
};
// 发送给好友
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
WeixinJSBridge.invoke('sendAppMessage', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.sendFriendLink,
"desc": window.shareData.fContent,
"title": window.shareData.fTitle
}, function (res) {
_report('send_msg', res.err_msg);
})
});
// 分享到朋友圈
WeixinJSBridge.on('menu:share:timeline', function (argv) {
WeixinJSBridge.invoke('shareTimeline', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.timeLineLink,
"desc": window.shareData.tContent,
"title": window.shareData.tTitle
}, function (res) {
_report('timeline', res.err_msg);
});
});
// 分享到微博
WeixinJSBridge.on('menu:share:weibo', function (argv) {
WeixinJSBridge.invoke('shareWeibo', {
"content": window.shareData.wContent,
"url": window.shareData.weiboLink,
}, function (res) {
_report('weibo', res.err_msg);
});
});
}, false)
©微布斯科技提供 qq 121285904 www.webus.cn