原生js 组件化跑马灯抽奖效果

带作弊（（；
简易原生JavaScript实现跑马灯下过
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li,.btn{
            width:40px;
            height:40px;
            display:inline-block;
            text-align: center;
            line-height: 40px;
            border: 1px solid #ddd;
            cursor:pointer;
        }
        li:hover,li.hover{
            background:#2a58f5;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
        <p class="btn">开始</p>
    </div>
    <script>

        var create=(function(){
            function create(options){
                this.options=options;
                this.events();
            }
            create.prototype={
                init:function(){
                    var docs=document.querySelectorAll(this.options.el)[0].firstElementChild.children;
                    var a=40,//默认循环5圈  可自定义
                        b=0,
                        me=this,
                        r=parseInt(Math.random()*(docs.length));

                    var s=me.options.defaultChoose?a+Number(me.options.defaultChoose):a+r;
                    loop();
                    function loop(){
                        for(let i=0,len=docs.length;i<len;i++){
                            docs[i].classList.remove("hover");
                        }
                        docs[b].classList.add("hover");
                        if(s<=0) {
                            console.log(b+1);
                            return;
                        }else{
                            s--;
                            b++;
                            b=(b>=docs.length?0:b);
                            setTimeout(function(){
                                loop();
                            },me.options.speed);
                        }
                    }
                },
                events:function(){
                    var me=this;
                    document.querySelectorAll(".btn")[0].addEventListener("click",function(){
                        me.init();
                    },false)
                }
            };

            return create;
        })();

        var app=new create({
            el:"#container",
            defaultChoose:null,//默认选中 下标
            speed:60,//滚动速度 单位毫秒
        });
    </script>
</body>
</html>
原生js 组件化 跑马灯抽奖效果

猜你喜欢

原生js 组件化跑马灯抽奖效果
