页面点击特效之前在浏览一个博客时，发现了鼠标点击页面会出现文字特效，事后想着怎么实现，这里给出demo的源码和实现过程中

之前在浏览一个博客时，发现了鼠标点击页面会出现文字特效，事后想着怎么实现，这里给出demo的源码和实现过程中一些需要注意的知识点。

实现的效果：鼠标点击页面时，光标处会淡入淡出一个词语

先给出demo的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>demo</title>
    <style>
    /* css3动画 */
      @keyframes myFirst {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes mySecond {
        from {
          opacity: 1;
          /* background-color: red */
        }
        to {
          opacity: 0;
          /* background-color: blue; */
        }
      }
      .body {
        width: 1024px;
        height: 1024px;
        background-color: aliceblue;
      }
      .newDiv {
        position: absolute;
        width: 40px;
        height: 30px;
        text-align: center;
        animation: myFirst 0.8s;   /* 淡入 */
        animation: mySecond 0.8s;  /* 淡出 */
      }
    </style>
  </head>
  <body class="body">
  </body>
  <script>
    var arr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治"];
    let mark = true;
    document.body.onmousedown = function(e) {
      if (mark) {
        mark = false;
        var clientX = e.clientX;
        var clientY = e.clientY;
        var index = Math.floor(Math.random() * 8);
        var text = arr[index];
        createDiv(clientX, clientY, text);
        var body = document.body;
        var div = document.getElementsByClassName("newDiv")[0];
        setTimeout(() => {
          body.removeChild(div);
        }, 1600);
        setTimeout(()=>{
          mark = true
        },1600);
      } else {
        // alert('你点的太快了');
      }
    };

    function createDiv(x, y, text) {
      var colorArr = ["red", "yellow", "green", "blue", "orange", "black"];
      var index = Math.floor(Math.random() * colorArr.length);
      var color = colorArr[index];
      var newDiv = document.createElement("div");
      newDiv.innerText = text;
      newDiv.classList.add("newDiv");
      newDiv.style.color = color;
      newDiv.style.opacity = 0;
      newDiv.style.left = x + "px";
      newDiv.style.top = y + "px";
      document.body.appendChild(newDiv);
    }
  </script>
</html>

复制以上代码，新建文件，浏览器打开，鼠标点击，即可看到效果。

demo实现过程中需要注意的点：

怎么获取鼠标点击处的坐标。

当发生鼠标事件时，事件对象中包括这些这些属性：

clientX,clientY:客户区坐标，这两个属性保存着事件发生时，光标在浏览器视口中的位置信息。

pageX,pageY:页面坐标这两个属性保存着事件发生时，光标在页面中的位置信息（IE8及以下版本不支持这两个属性，不过可以使用客户区坐标和滚动信息计算出来）。
```
    //IE8及以下版本，其他浏览器可以直接使用页面坐标.
    pageY = clientY + (document.body.srollTop || document.documentElement.scrollTop)
    pageX = clientX + (document.body.srollLeft || document.documentElement.scrollLeft)
    //document.body为混杂模式，document.documentElement 为标准模式
    //从上面的表达式中，也可以看出，如果页面没有滚动，客户区坐标和页面坐标的值是一致的。
```
screenX,screenY:屏幕坐标位置，这两个属性保存着事件发生时，光标在屏幕上的位置信息。

怎么限制点击的频率

一种方法是，在事件回调函数外声明一个变量，通过控制该变量的布尔值，控制用户的点击频率不至于太快

    let mark = true;
    document.body.onmousedown = function(e){
        if(mark){
            mark = false;
            ...  //逻辑代码
            setTimeout(()=>{
                mark = true
            },2000)  
        } else{
            alert('你点击的太快了') //或者什么也不做。
        }
    }

另一种方法接收超时调用返回的ID值，如果在指定的时间内重复触发事件，会取消超时调用，重新进行超时调用。这种实现方法并不能准确的限制点击的频率。

    let timer =null;
    document.body.addEventListener('click',function(e){
     clearTimeout(timer);
     timer = setTimeout(function(){
         ...//你的逻辑
     },2000)
})