用Class创建一个废话生成器

效果

仅供娱乐，再次复习下Class

步骤

先获取所有需要用到的标签

const input = document.querySelector('input'),
              btn1 = document.querySelector('.btn1'),
              btn2 = document.querySelector('.btn2'
              p = document.querySelector('p')

定义废话生成器类

        class Bullshit {
            //构造器
           constructor(text,color){
                this.text = text
                this.color = color
            }
            //static定义静态方法
            static welcome_tips (){
                return '温馨提示：您这是在说废话'
            }
            static welcome (){
                p.innerHTML = this.welcome_tips()
            }
            show(){
                p.innerHTML = this.text + input.value
                p.style.color = this.color
            }
            set extra (value){
                this.value = value
                p.innerHTML += value
            }
            get extra (){
                return `这些是废话：${this.text},${this.value}`
            }
        }

继承父类废话生成器 使用extends关键字

        //继承废话父类 使用extends关键字
        class Son_of_Bullshit extends Bullshit{
            constructor(text,color,fontsize){
                //调用子类的this之前必须先使用super
                super(text,color)
                this.fontsize = fontsize
            }
            show() {
                p.innerHTML = this.text + p.innerHTML
                p.style.color = this.color
                p.style.fontSize = this.fontsize
            }
        }

为标签绑定点击事件

btn1.addEventListener('click',function(){
            const bullshit = new Bullshit('我知道','#00a1d6')
            bullshit.show()
            //调用getter setter不需要加括号
            bullshit.extra = '儿'
            console.log(bullshit.extra);

        })

        btn2.addEventListener('click',function(){
            const bullshit = new Son_of_Bullshit('你知道','aqua','30px')
            bullshit.show()
        })
        p.addEventListener('click',function(){
            //调用静态方法记得使用Bullshit类
            Bullshit.welcome()
        })