dom-tips

时常看别人博客添加了各种效果，有些好奇想自己实现一个，今天就来实现一个点击页面弹出一个tips块
interface TipsOptions {
  messages: string | string[]
  className?: string
}

export class Tips {
  public className?: string
  public messages: string[]
  public count = 0
  constructor(options: TipsOptions) {
    this.messages = options.messages instanceof Array ? options.messages : [options.messages]
    this.className = options.className
  }

  public render(): void {
    const self = this
    const messageLength = this.messages.length

    document.addEventListener('click', function (event: MouseEvent) {
      self.count++

      const el = this.createElement('div')
      // el.innerText = self.messages[self.count % messageLength];
      el.innerText = self.messages[Math.floor(Math.random() * messageLength)]

      if (self.className) {
        el.classList.add(self.className)
      }

      el.style.maxWidth = '60px'
      el.style.color = 'red'
      el.style.cursor = 'default'
      el.style.userSelect = 'none'
      el.style.opacity = '0'
      el.style.transitionDuration = '200ms'
      el.style.position = 'absolute'
      el.style.top = event.pageY + 'px'

      this.body.appendChild(el)

      /*
       * 水平 点击 位置居中
       * offsetWidth 必须要等元素插入dom中后才能获取到
       */
      el.style.left = event.pageX - el.offsetWidth / 2 + 'px'

      console.log(event.pageX, el.style.left, el.offsetWidth, event.pageX - el.offsetWidth / 2)

      // 等待 前面执行栈执行完毕 立即插入任务队列
      setTimeout(function () {
        el.style.opacity = '1'
        // 垂直浮动 最高 50px 距离
        el.style.transform = `translateY(${-Math.floor(Math.random() * 50)}px)`
      }, 0)

      setTimeout(() => {
        el.style.opacity = '0'
        // 过渡动画 是 200ms 故 延时200 移除dom
        setTimeout(() => {
          this.body.removeChild(el)
        }, 200)
      }, 3000)
    })
  }
}
效果完工
dom-tips ​

dom-tips
