> 웹 프론트엔드 > JS 튜토리얼 > jQuery는 팝업 창과 횟수(코드)를 사용하여 캐러셀 복권을 구현합니다.

jQuery는 팝업 창과 횟수(코드)를 사용하여 캐러셀 복권을 구현합니다.

不言
풀어 주다: 2019-03-29 09:54:09
앞으로
2253명이 탐색했습니다.

이 글은 팝업 창과 시간(코드)을 갖춘 회전식 복권의 jQuery 구현에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게.

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");
                }

            }
        });
    };
});
로그인 후 복사

이 기사는 여기에서 끝났습니다. 더 많은 흥미로운 콘텐츠를 보려면 PHP Chinese Net의 #🎜를 팔로우하세요. 🎜#JavaScript 비디오 튜토리얼 칼럼! ! !

위 내용은 jQuery는 팝업 창과 횟수(코드)를 사용하여 캐러셀 복권을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿