javascript 面向对象1 选项卡练习

传统选项卡和面向对象的选项卡的区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>面向对象选项卡</title>
        <style type="text/css">
            .div1 div{
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                display: none;
            }
            .active{
                background: pink;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <input class="active" type="button" name="" id="" value="1" />
            <input type="button" name="" id="" value="2" />
            <input type="button" name="" id="" value="3" />
            <div style="display: block;">111111111111</div>
            <div>22222222222222</div>
            <div>3333333333333</div>
        </div>
        <div class="div1 div2">
            <input class="active" type="button" name="" id="" value="1" />
            <input type="button" name="" id="" value="2" />
            <input type="button" name="" id="" value="3" />
            <div style="display: block;">111111111111</div>
            <div>22222222222222</div>
            <div>3333333333333</div>
        </div>
    </body>
    <script type="text/javascript">
        // 传统选项卡
        /*window.onload=function(){
            var div1=document.querySelector('.div1')
            var div2=div1.querySelectorAll('div')
            var input=div1.querySelectorAll('input')
             for(var i=0;i<input.length;i++){
                 input[i].index=i;
                 input[i].onclick=function(){
                    for(var i=0;i<input.length;i++){
                    input[i].classList.remove('active')
                    div2[i].style.display='none'
                    }                    
                    this.classList.add('active')
                    div2[this.index].style.display='block';
                 }
                
             }
        }*/
        // 面向对象选项卡
        //先变形
        //尽量不要出现函数嵌套函数
        //可以有全局变量
        /*var div1=null;
        var div=null;
        var input=null;
        window.onload=function(){
            div1=document.querySelector('.div1')
            div=div1.querySelectorAll('div')
            input=div1.querySelectorAll('input')
            init()
        }
        function init(){
            for(var i=0;i<input.length;i++){
                input[i].index=i;
                input[i].onclick=change
            }
        }
        function change(){
            for(var i=0;i<input.length;i++){
                input[i].classList.remove('active')
                div[i].style.display='none'
            }                    
            this.classList.add('active')
            div[this.index].style.display='block';
        }*/
        /*改成面向对象*/
        window.onload=function(){
            var t = new Tab('.div1');
            t.init()
            var t1 = new Tab('.div2');
            t1.init()
            t1.payll()
        }
        function Tab(className){
            this.div1=document.querySelector(className);
            this.input=this.div1.querySelectorAll('input');
            this.div=this.div1.querySelectorAll('div')
            this.num=0;
        }
        Tab.prototype.init=function(){
            var This=this;
            for (var i = 0; i < this.input.length; i++) {
                this.input[i].index=i;
                this.input[i].onclick=function(){
                    This.change(this)
                }
            }
        }
        
        
        
        Tab.prototype.change=function(obj){
            for (var i = 0; i < this.input.length; i++) {
                this.input[i].classList.remove('active')
                this.div[i].style.display='none';
            }
            obj.classList.add('active')
            this.div[obj.index].style.display='block'
        }
        
        Tab.prototype.payll=function(){
            var thas=this;
            setInterval(function(){
                if (thas.num==thas.input.length-1) {
                    thas.num=0
                } else{
                    thas.num++;
                }                
                for (var i = 0; i < thas.input.length; i++) {
                    thas.input[i].classList.remove('active')
                    thas.div[i].style.display='none';
                }
                thas.input[thas.num].classList.add('active')
                thas.div[thas.num].style.display='block'
                
                
            },3000)
        }
        
        
        
    </script>
</html>

 

posted @ 2018-08-24 17:01  乌金血剑  阅读(96)  评论(0)  编辑  收藏  举报