首页 > 电脑主机 >

js简易彩票实现

电脑杂谈　发布时间：2020-03-24 19:15:29　来源：网络整理

js抽奖重复_js集合去重复_js array去重复

每个人都在活动页面上看到很多丰富多彩的彩票应用程序，并且Internet上有很多js和ass. 今天，我也想在工作时使用彩票. 我以前没有写过这种js，也不会要求它. 我不得不问妈妈js抽奖重复，尽管我发现还有一个用js编写的框架，并且我已经对其进行了研究，但发现它很复杂. 我突然想到，该公司对彩票js进行了简单的实现. 我们必须对其进行研究，然后根据自己的需要将其包装到一个类中.

js array去重复_js抽奖重复_js集合去重复

html代码如下:

js集合去重复_js array去重复_js抽奖重复

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    ul{list-style:none;}
    li{display:inline-block; border:1px solid #000;}
    span{display:inline-block; padding:10px 15px;}
    li .lottery_yeah{background:red;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
</head>
<body>
    <input type="button" id="btn" value="button" />
    <ul id="la" class="lottery_all">
        <li><span eid="0" class="lottery_box">1</span></li>
        <li><span eid="1" class="lottery_box">2</span></li>
        <li><span eid="2" class="lottery_box">3</span></li>
        <li><span eid="3" class="lottery_box">4</span></li>
        <li><span eid="4" class="lottery_box">5</span></li>
        <li><span eid="5" class="lottery_box">6</span></li>
        <li><span eid="6" class="lottery_box">7</span></li>
        <li><span eid="7" class="lottery_box">8</span></li>
        <li><span eid="8" class="lottery_box">9</span></li>
    </ul>
    <script type="text/javascript" src="cj.js"></script>
</body>
</html>

js抽奖重复_js集合去重复_js array去重复

js代码如下:

js array去重复_js抽奖重复_js集合去重复

/*
* 抽奖封装对象
* @class LuckyDraw
* @param { Number } 抽奖悬停号码 
* @method LuckyDraw.tigerMac
* @param { Number, Function } 运动步伐间距，回调函数
*
*/
function LuckyDraw( numId ) {
    if ( this instanceof LuckyDraw ) {
        this.rewardId = numId;
        this.timer = null;
    } else {
        return new LuckyDraw( numId );
    }
}
LuckyDraw.prototype.tigerMac = function( iStep, callback ) {
    var speed = 200 / iStep, // 时间间隔
        $luckyItem = $('#la .lottery_box'),
        len = $luckyItem.length,
        index = 0, // 索引值
        _this = this;
        
    $luckyItem.removeClass('lottery_yeah').eq( index ).addClass('lottery_yeah');
    
    this.timer = setInterval(function () {
        if ( index + 1 > len ) {
            index = 0;
            iStep++;
            clearInterval( _this.timer );
            _this.tigerMac( iStep, callback );
        } else {
            if ( iStep >= 6 ) {
                if ( _this.rewardId && $luckyItem.eq( index ).attr('eid') == _this.rewardId ) {
                    $luckyItem.eq( index ).addClass('lottery_yeah');
                    clearInterval( _this.timer );
                    if ( callback && typeof callback === 'function' ) {
                        callback.call( $luckyItem[index] );
                    }
                    return
                }
            }
            index++;
        }
        $luckyItem.removeClass('lottery_yeah').eq(index).addClass('lottery_yeah');
    }, speed)
};
// 抽奖
$('#btn').click(
    (function(){
        var n = 3,
            aLuckyNum = [2, 5, 8],
            oCj = null;
            
        return function() {
            if ( n ) {
                oCj = new LuckyDraw( aLuckyNum[n - 1] );
                n--;
                oCj.tigerMac( 1, function(){
                    if ( Number( $(this).text() ) === 6 ) {
                        alert('恭喜中奖啦！你还有' + n + '次抽奖机会哦！');
                    } else if ( n ) {
                        alert('^ @ ^ 没中奖，加油！你还有' + n + '次抽奖机会哦！');
                    } else {
                        alert('^ @ ^ 没中奖！谢谢参与');
                    }
                } );
                oCj = null;
            }else {
                alert('你没有抽奖机会啦');
            }
        }
    })()
);

以上是整个js彩票的代码. 至于彩票的布局js抽奖重复，大家都会看一下. 每个人都认为有更好的方法来实现它，欢迎留言或与我联系以共同学习！

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-150937-1.html

相关阅读

发表评论　　请自觉遵守互联网相关的政策法规，严禁发布、暴力、反动的言论

贾岛

呵呵

2026年04月28日回复顶转发

每日福利

如何为旅行摄影摆姿势

java异步调用框架 Android单元测试研究与实践

由于我已经使用了这些最好的表情包制作软件，因此我不惧怕战斗！

解决方法：笔记本电脑辐射会影响孕妇吗？

热点图片

热点排行