页面点击特效

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

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

先给出demo的代码

<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;  /* 淡出 */
  }

[tip type="warning"]
以上代码放到前
[/tip]

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);
}

[tip type="warning"]
以上代码放在结束前
[/tip]

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

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)})