es6 class 的 constructor super关键字使用

公告  2  425

謓dêシ累了 VIP1 2018/02/07

来自：北京-中国

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .on{ background: rgb(9, 224, 134);}
        .box div{ width: 200px; height: 200px; border: 1px solid #666; display: none;}
        .box div.active{ display: block;}
    </style>
</head>

<body>
    <div id="box" class="box">
        <input type="button" class="on" value="aaa">
        <input type="button" value="bbb">
        <input type="button" value="ccc">
        <div class="active">aaaa</div>
        <div>bbbb</div>
        <div>cccc</div>
    </div>

    <div id="box2" class="box">
        <input type="button" class="on" value="aaa">
        <input type="button" value="bbb">
        <div class="active">aaaa</div>
        <div>bbbb</div>
    </div>

    <script>
        class Tab{
            constructor(config){
                this.config = config || {};
                if(typeof this.config.el == 'undefined') return; //id必填
                this.oBox = document.getElementById(this.config.el);
                this.aInp = this.oBox.getElementsByTagName('input');
                this.aDiv = this.oBox.getElementsByTagName('div');
                this.length = this.aDiv.length;
                this.n = 0;
                this.init();
            };
            init(){
                for(let i=0;i<this.length;i++){
                    this.aInp[i].onclick=function(){
                        document.title = i;
                        this.hide();
                        this.show(i);
                    }.bind(this);
                }
            };
            show(index){
                this.aInp[index].setAttribute('class','on');
                this.aDiv[index].setAttribute('class','active');
                this.n =index;
            };
            hide(){
               
                for(let i=0; i<this.length;i++){
                    this.aInp[i].setAttribute('class','');
                    this.aDiv[i].setAttribute('class','');
                }
            };
        };

        class AutoTab extends Tab{
            constructor(config){
                super(config);
                setInterval(function(){
                    this.next()
                }.bind(this),1000);
                console.log(this);
            };
            next(){
                
               if(this.n >= this.length-1){  
                   this.n = 0
                }else{
                   this.n++  ;
                }
                console.log(this.n);
                this.hide();
                this.show(this.n);
            };
        };


        new Tab({
            el:'box'
        });

        new AutoTab({
            el:'box2'
        });
       
    </script>
</body>

</html>

回帖

謓dêシ累了 VIP1 2018/03/03 第1楼

来自：北京-中国

回复
謓dêシ累了 VIP1 2018/07/25 第2楼

来自：北京-中国

回复

es6 class 的 constructor super关键字使用

温馨通道

回贴榜

友情链接