js简单抽奖

 

学习js一个月利用已学的知识写了一个简单的抽奖

先看效果图，比较简单

 

 

 html代码

 <div class="big">
        <div class="small" id="act">越南美女</div>
        <div class="small">超详细前端课</div>
        <div class="small">平板</div>
        <div class="small">500元红包</div>
        <div id="cj">点击抽奖</div>
        <div class="small">66红包</div>
        <div class="small">精美桃子一个</div>
        <div class="small">钥匙扣</div>
        <div class="small">谢谢参与</div>
    </div>

css代码

 * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .big {
            width: 318px;
            height: 318px;
            margin: 100px auto;
        }

        .big>div {
            width: 100px;
            height: 100px;
            background: #48D1CC;
            float: left;
            line-height: 100px;
            text-align: center;
            border: solid;
        }

        .big>div:nth-of-type(5) {
            background: #008B8B;
            cursor: pointer;
        }

        #act {
            background: #20B2AA;
        }

 js代码

给抽奖的盒子绑定点击事件

  this.oCj.addEventListener('click', this.outFn.bind(this))

 因为要用到定时器所以封装一个清除定时器的函数

 stop() {
                clearInterval(this.outime);
            }

然后定时器，我用的倒计时来停止

this.outime = setInterval(this.clickFn.bind(this), 100);
setTimeout(this.stop.bind(this), this.time);

主要代码段，让他一直走，设置样式，前面的取消样式

this.num += 1;
if (this.num > this.arrDiv.length - 1) {this.num = 0;}
for (let i = 0; i < this.arrDiv.length; i++) {this.arrDiv[i].id = '';}
this.arrDiv[this.num].id = "act";

js所有代码，欢迎补充修改

  class Draw {
            constructor() {
                this.arrDiv = this.$$('small')
                //console.log(this.arrDiv);
                this.oCj = this.$('#cj');
                this.num = 0;
                this.oCj.addEventListener('click', this.outFn.bind(this))
            }
            outFn() {
                this.time = Math.round(Math.random() * 4000 + 5000);
                this.outime = setInterval(this.clickFn.bind(this), 100);
                this.stop.bind(this);
                setTimeout(this.stop.bind(this), this.time);
            }
            clickFn() {
                this.num += 1;
                if (this.num > this.arrDiv.length - 1) {
                    this.num = 0;
                }
                for (let i = 0; i < this.arrDiv.length; i++) {
                    this.arrDiv[i].id = '';
                }
                this.arrDiv[this.num].id = "act";
            }

            stop() {
                clearInterval(this.outime);
            }
            $(ele) {
                return document.querySelector(ele)
            }
            $$(ele) {
                return document.getElementsByClassName(ele)
            }
        }
        new Draw;