Der Inhalt dieses Artikels befasst sich mit der Implementierung der Karussell-Lotterie (Code) mit Popup-Fenstern und -Zeiten. Ich hoffe, dass er für Sie hilfreich ist.
html:
<div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="playnum"></span>次抽奖机会，点击立刻抽奖！~</h2> <div class="g-lottery-box"> <div class="g-lottery-img"> </div> <a class="playbtn" href="javascript:;" title="开始抽奖"></a> </div> </div> </div> </div>
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");
}
}
});
};
});Für weitere spannende Inhalte können Sie auf JavaScript auf der chinesischen PHP-Website achten Tutorial Kolumne! ! !
Das obige ist der detaillierte Inhalt vonjQuery implementiert Karussell-Lotterie mit Popup-Fenster und Anzahl der Male (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
