h5php大转盘抽奖,jQuery带次数带弹窗的大转盘抽奖代码(支持h5)

bVbqAdu

bVbqAdv

html:

您已拥有次抽奖机会,点击立刻抽奖!~

js:

$(function() {

var $btn = $('.playbtn');

var $btn02 = $('.g-lottery-img');

var $tan=$('#info');

var playnum = 1; //初始次数,由后台传入

$('.playnum').html(playnum);

var isture = 0;

var clickfunc = function() {

var data = [1, 2, 3, 4, 5];

//data为随机出来的结果,根据概率后的结果

data = data[Math.floor(Math.random() * data.length)];

switch(data) {

case 1:

rotateFunc(1, 36, '01');

break;

case 2:

rotateFunc(2, 108, '02');

break;

case 3:

rotateFunc(3, 180, '03');

break;

case 4:

rotateFunc(4, 252, '04');

break;

case 5:

rotateFunc(5, 324, '05');

break;

}

}

if(playnum>0)

{

$('.playbtn').addClass("playbtn02");

}

$btn.click(function() {

if(isture) return; // 如果在执行就退出

isture = true; // 标志为 在执行

//先判断是否登录,未登录则执行下面的函数

if(1 == 2) {

$('.playnum').html('0');

alert("请先登录");

isture = false;

} else { //登录了就执行下面

if(playnum <= 0) { //当抽奖次数为0的时候执行

alert("没有次数了");

$('.playnum').html(0);

isture = false;

} else { //还有次数就执行

playnum = playnum - 1; //执行转盘了则次数减1

if(playnum <= 0) {

playnum = 0;

}

$('.playnum').html(playnum);

clickfunc();

}

}

});

var rotateFunc = function(awards, angle, text) {

isture = true;

$btn.stopRotate();

$btn02.rotate({

angle: 0,

duration: 4000, //旋转时间

animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转

callback: function() {

isture = false; // 标志为 执行完毕

$('#info'+text).show();

if(playnum <= 0) { //当抽奖次数为0的时候执行

$('.playbtn').removeClass("playbtn02");

}

}

});

};

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 h5转盘抽奖的示例代码: HTML: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>大转盘抽奖</title> <style> body { background-color: #f5f5f5; font-family: Arial, sans-serif; } #canvas { display: block; margin: 50px auto; width: 300px; height: 300px; background: url('bg.png') no-repeat center center; background-size: 100%; } #pointer { display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 100px; margin-top: -50px; margin-left: -5px; background-color: #ff0000; transform-origin: bottom center; transition: transform 5s ease-in-out; } #btn { display: block; margin: 50px auto; padding: 10px 20px; font-size: 20px; color: #fff; background-color: #ff0000; border: none; border-radius: 5px; cursor: pointer; outline: none; } </style> </head> <body> <canvas id="canvas"></canvas> <span id="pointer"></span> <button id="btn">开始抽奖</button> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/velocity/2.0.6/velocity.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <script src="prize.js"></script> <script> var canvas = document.getElementById('canvas'); var pointer = document.getElementById('pointer'); var btn = document.getElementById('btn'); var ctx = canvas.getContext('2d'); var pointerDeg = 0; var spinning = false; var prizes = [ { title: "一等奖", color: "#eaeaea" }, { title: "二等奖", color: "#f5f5f5" }, { title: "三等奖", color: "#eaeaea" }, { title: "四等奖", color: "#f5f5f5" }, { title: "五等奖", color: "#eaeaea" }, { title: "六等奖", color: "#f5f5f5" }, { title: "七等奖", color: "#eaeaea" }, { title: "八等奖", color: "#f5f5f5" } ]; function drawPrize() { ctx.clearRect(0, 0, canvas.width, canvas.height); var x = canvas.width / 2; var y = canvas.height / 2; var radius = Math.min(x, y) - 10; var angle = Math.PI * 2 / prizes.length; ctx.beginPath(); for (var i = 0; i < prizes.length; i++) { var startAngle = i * angle - Math.PI / 2; var endAngle = (i + 1) * angle - Math.PI / 2; ctx.arc(x, y, radius, startAngle, endAngle, false); ctx.fillStyle = prizes[i].color; ctx.fill(); ctx.save(); ctx.translate(x, y); ctx.rotate(i * angle); ctx.font = "bold 20px Arial"; ctx.fillStyle = "#ff0000"; ctx.textAlign = "center"; ctx.fillText(prizes[i].title, radius * 0.4, 0); ctx.restore(); } } function rotatePointer() { var deg = _.random(360, 720); pointerDeg += deg; pointer.style.transform = 'rotate(' + pointerDeg + 'deg)'; pointer.addEventListener('transitionend', function() { spining = false; var prize = Math.floor(pointerDeg / (360 / prizes.length)) % prizes.length; alert('恭喜您抽中了' + prizes[prize].title); }, false); } drawPrize(); btn.addEventListener('click', function() { if (!spining) { spining = true; rotatePointer(); } }); </script> </body> </html> ``` CSS: ```css body { background-color: #f5f5f5; font-family: Arial, sans-serif; } #canvas { display: block; margin: 50px auto; width: 300px; height: 300px; background: url('bg.png') no-repeat center center; background-size: 100%; } #pointer { display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 100px; margin-top: -50px; margin-left: -5px; background-color: #ff0000; transform-origin: bottom center; transition: transform 5s ease-in-out; } #btn { display: block; margin: 50px auto; padding: 10px 20px; font-size: 20px; color: #fff; background-color: #ff0000; border: none; border-radius: 5px; cursor: pointer; outline: none; } ``` JavaScript: ```javascript var canvas = document.getElementById('canvas'); var pointer = document.getElementById('pointer'); var btn = document.getElementById('btn'); var ctx = canvas.getContext('2d'); var pointerDeg = 0; var spinning = false; var prizes = [ { title: "一等奖", color: "#eaeaea" }, { title: "二等奖", color: "#f5f5f5" }, { title: "三等奖", color: "#eaeaea" }, { title: "四等奖", color: "#f5f5f5" }, { title: "五等奖", color: "#eaeaea" }, { title: "六等奖", color: "#f5f5f5" }, { title: "七等奖", color: "#eaeaea" }, { title: "八等奖", color: "#f5f5f5" } ]; function drawPrize() { ctx.clearRect(0, 0, canvas.width, canvas.height); var x = canvas.width / 2; var y = canvas.height / 2; var radius = Math.min(x, y) - 10; var angle = Math.PI * 2 / prizes.length; ctx.beginPath(); for (var i = 0; i < prizes.length; i++) { var startAngle = i * angle - Math.PI / 2; var endAngle = (i + 1) * angle - Math.PI / 2; ctx.arc(x, y, radius, startAngle, endAngle, false); ctx.fillStyle = prizes[i].color; ctx.fill(); ctx.save(); ctx.translate(x, y); ctx.rotate(i * angle); ctx.font = "bold 20px Arial"; ctx.fillStyle = "#ff0000"; ctx.textAlign = "center"; ctx.fillText(prizes[i].title, radius * 0.4, 0); ctx.restore(); } } function rotatePointer() { var deg = _.random(360, 720); pointerDeg += deg; pointer.style.transform = 'rotate(' + pointerDeg + 'deg)'; pointer.addEventListener('transitionend', function() { spining = false; var prize = Math.floor(pointerDeg / (360 / prizes.length)) % prizes.length; alert('恭喜您抽中了' + prizes[prize].title); }, false); } drawPrize(); btn.addEventListener('click', function() { if (!spining) { spining = true; rotatePointer(); } }); ``` 注意: 以上代码使用了 jQuery, Velocity 和 lodash 库,请先在引入代码前引入这些库。 以上示例代码仅供参考,实际项目中可能需要根据具体需求进行修改,如更改奖品数量、奖品内容、转盘样式等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值