js实现点击出现不同颜色的图案或文字

js实现点击出现不同颜色的图案或文字

```javascript
// eslint-disable-next-line no-unused-vars
  var intrest = function (ms) {
    var t;
    //定时器	var msg= "❤";
    // 文本内容
    var _top = 2;
    // 默认移动速度
    var op = 2;
    // 默认原透明度
    var id = "mdiv" + Math.random();
    // 定义id
    // 定义颜色
    var cl = "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ",";
    // 获取参数
    this.ms = ms || {x: 0, y: 0};
    // 初始化
    this.init = function () {
      document.body.appendChild(this.dom());
      t = setInterval(this.takeset, 1000 / 60);
    };	//生成一个div
    this.dom = function () {
      var mdiv = document.createElement("div");
      mdiv.id = id;
      // eslint-disable-next-line no-undef
      mdiv.innerHTML = '★';
      mdiv.style.color = cl + op + ")";
      mdiv.style.position = "fixed";
      mdiv.style.fontSize = "24px";
      mdiv.style.left = this.ms.x + "px";
      mdiv.style.top = this.ms.y + "px";
      mdiv.style.cursor = "pointer";
      return mdiv;
    };
    // 计时器调用方法
    this.takeset = function () {
      _top += .1;
      // 速度越来越快
      op -= .03;
      // 透明度发生改变
      var dom = document.getElementById(id);
      // 获取当前dom,不能直接用self.dom() ？？？ 不理解 T_T
      var top = parseInt(dom.style.top);
      var nowtop = (top - _top);
      dom.style.setProperty("top", nowtop + "px");
      dom.style.color = cl + op + ")";
      // 透明度小于.2移除定时器并移除dom
      if (op <= .2) {
        clearInterval(t);
        document.body.removeChild(dom);
      }
    };
    this.init();
  };
  document.onclick = function (e) {
    var mouse = {x: e.clientX, y: e.clientY};
    new intrest(mouse);
  };