js简单封装样式

Posted 2021-02-05 hdq用心微笑

class Foo{
  constructor(name) {
    this.name = name
  }

  greet() {
    console.log(‘hello this is‘,this.name)
  }

  someThingAsync() {
    return Promise.resolve()
  }

  asyncGreet() {
    this.someThingAsync().then(this.greet.bind(this))
  }
}

new Foo(‘DOG‘).asyncGreet();

//生成六位数的验证码
//方法1
console.log((Math.floor(Math.random() * 999999)));
//方法2
console.log(Math.random().toString().slice(-6));
//方法3
console.log(Math.random().toFixed(6).slice(-6));
//方法4

document.querySelectorAll(‘#id‘).style.color = ‘red‘;
document.querySelectorAll(‘#id‘).style.fontSize = ‘12px‘;
document.querySelectorAll(‘#id‘).style.background = ‘red‘;

函数封装

function hdq(selector,color){
document.querySelectorAll(selector)[0].style.color = color
}

hdq(‘#d‘,‘red‘)

function item(selector,color) {
document.querySelectorAll(selector,color)
}

function getElement(selector) {
this.style = document.querySelectorAll(selector).style
}

getElement.prototype.color = function(color) {
this.style.color = color
return this
}

getElement.prototype.fontSize = function(fontSize) {
this.style.fontSize = fontSize
return this
}

getElement.prototype.background = function(bg) {
this.style.background = bg
return this
}

var el = new getElement("#div")

el.color(‘bule‘).background(‘#333‘).fontSize(‘16px‘)