前端装逼技巧 108 式—— 一起摇摆

Posted 2021-08-21 独钓寒江雪

《洗 练》

半夜不眠，
推门至院落，
院中的莲雾树熟了，
有一枚红果悄然坠落，
我剪一段月光裹住心伤。

七月的虫声是炸了线的唐诗三百，
格律皆破，
独独押一个锡韵：寂寂寂寂寂寂。
我说：渔人哪，你竟不如一只虫子，你三年未归。

瀚海无路，
只有等字，
你不妨托星月当信差，
若我裁得一截银白的咸布，
渍痛了伤口，
我便知晓，
你已无法回來。

  关注本系列的朋友们，因为一些事情，好久不见了，真是抱歉，八月伊始，本系列又回来了。其实我一直在思考，《前端装逼技巧 108 式》的意义究竟在哪里？是带来一些开发技巧吗？是整合一些大家忽略的细节吗？是真的用来装逼的吗？是更多的专注于技术还是趣味性？这是一个取舍问题，偏技术就会失去一定的趣味性；偏趣味性又会失去一些深度。我认为，纯技术文章其实是很多的了，我更多的是希望给程序猿生活带来更多的乐趣，在系列文章余下的几篇中，依然会力求从各个角度更多的为程序人生增添一些别样的色彩。

系列文章发布汇总：

• 前端装逼技巧 108 式（一）—— 打工人
• 前端装逼技巧 108 式（二）—— 不讲武德
• 前端装逼技巧 108 式（三）—— 冇得感情的API调用工程师
• 前端装逼技巧 108 式（四）—— 一起摇摆
• 浏览器是如何工作的：Chrome V8让你更懂javascript

文章风格所限，引用资料部分，将在对应小节末尾标出。

第五十五式：你见过页面跳舞吗？ —— 那 High 动的页面一如那些年我逝去的青春

  还记得魔性的小苹果和抖音吗，作为前端的你，有想过让页面也 High 起来、舞动起来吗？

  先看效果：

下面这段代码可直接在控制台执行，略长。可直接跳到本小节末，使用简短 JS 引入的方式进行体验（带音乐效果哟）

setTimeout(letDance, 1000);
var bgmSrc =
  \'https://nd002723.github.io/carnival/audio/Martin%20Jensen%20-%20Fox%20(Loop%20Remix).mp3\';
var cssHref = \'https://nd002723.github.io/carnival/css/high.css\';
function letDance() {
  function loadCss() {
    //将css文件引入页面
    var myCss = document.createElement(\'link\');
    myCss.setAttribute(\'type\', \'text/css\');
    myCss.setAttribute(\'rel\', \'stylesheet\');
    myCss.setAttribute(\'href\', cssHref); //css文件地址
    myCss.setAttribute(\'class\', l);
    document.body.appendChild(myCss);
  }

  function h() {
    var e = document.getElementsByClassName(l);
    for (var t = 0; t < e.length; t++) {
      document.body.removeChild(e[t]);
    }
  }

  function p() {
    var e = document.createElement(\'div\');
    e.setAttribute(\'class\', a);
    document.body.appendChild(e);
    setTimeout(function () {
      document.body.removeChild(e);
    }, 100);
  }

  function getSize(e) {
    //获取目标的宽高
    return {
      height: e.offsetHeight,
      width: e.offsetWidth,
    };
  }

  function checkSize(i) {
    //判断目标大小是否符合要求
    var s = getSize(i); //获取目标的宽高
    return (
      s.height > minHeight &&
      s.height < maxHeight &&
      s.width > minWidth &&
      s.width < maxWidth
    ); //判断目标是否符合条件
  }

  function m(e) {
    var t = e;
    var n = 0;
    while (!!t) {
      n += t.offsetTop;
      t = t.offsetParent;
    }
    return n;
  }

  function g() {
    var e = document.documentElement;
    if (!!window.innerWidth) {
      return window.innerHeight;
    } else if (e && !isNaN(e.clientHeight)) {
      return e.clientHeight;
    }
    return 0;
  }

  function y() {
    if (window.pageYOffset) {
      return window.pageYOffset;
    }
    return Math.max(
      document.documentElement.scrollTop,
      document.body.scrollTop
    );
  }

  function E(e) {
    var t = m(e);
    return t >= w && t <= b + w;
  }

  function setBgm() {
    //设置音乐
    var e = document.createElement(\'audio\');
    e.setAttribute(\'class\', l);
    e.src = bgmSrc; //bgm地址
    e.loop = false;
    e.addEventListener(
      \'canplay\',
      function () {
        setTimeout(function () {
          x(k);
        }, 500);
        setTimeout(function () {
          N();
          p();
          for (var e = 0; e < O.length; e++) {
            T(O[e]);
          }
        }, 15500);
      },
      true
    );
    e.addEventListener(
      \'ended\',
      function () {
        N();
        h();
      },
      true
    );
    e.innerhtml =
      \' <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>\';
    document.body.appendChild(e);
    e.play();
  }

  function x(e) {
    e.className += \' \' + s + \' \' + o;
  }

  function T(e) {
    e.className += \' \' + s + \' \' + u[Math.floor(Math.random() * u.length)];
  }

  function N() {
    var e = document.getElementsByClassName(s);
    var t = new RegExp(\'\\\\b\' + s + \'\\\\b\');
    for (var n = 0; n < e.length; ) {
      e[n].className = e[n].className.replace(t, \'\');
    }
  }
  var minHeight = 3; //最小高度
  var minWidth = 3; //最小宽度
  var maxHeight = 800; //最大高度
  var maxWidth = 1400; //最大宽度
  var s = \'mw-harlem_shake_me\';
  var o = \'im_first\';
  var u = [\'im_drunk\', \'im_baked\', \'im_trippin\', \'im_blown\'];
  var a = \'mw-strobe_light\';
  var l = \'mw_added_css\'; //最终要移除的css
  var b = g();
  var w = y();
  var C = document.getElementsByTagName(\'*\');
  var k = null;
  for (var L = 0; L < C.length; L++) {
    var targetDiv = C[L];
    if (checkSize(targetDiv)) {
      if (E(targetDiv)) {
        k = targetDiv;
        break;
      }
    }
  }
  if (targetDiv === null) {
    //如果没找到合适大小的
    console.warn(\'没能找到合适的大小. 换一个页面试试？.\');
    return;
  }

  loadCss(); //将自定义css文件引入页面
  setBgm(); //添加背景音乐

  var O = [];
  for (var L = 0; L < C.length; L++) {
    var targetDiv = C[L];
    if (checkSize(targetDiv)) {
      O.push(targetDiv);
    }
  }

  //网页整体倾斜效果（这块儿本来是JQuery实现的，为了避免引入JQuery，做了改动。）
  var style = document.createElement(\'style\');
  style.type = \'text/css\';
  try {
    style.appendChild(
      document.createTextNode(
        \'body{overflow-x:hidden;transform: rotate(1deg);-webkit-transform: rotate(1deg);-moz-transform: rotate(1deg);-o-transform: rotate(1deg);-ms-transform: rotate(1deg)}\'
      )
    );
  } catch (ex) {
    style.styleSheet.cssText = \'body{background-color:red}\'; //针对IE
  }
  var head = document.getElementsByTagName(\'head\')[0];
  head.appendChild(style);
}

  或者更简洁一点，在页面 URL 栏或者控制台键入以下代码直接体验：

在浏览器地址栏黏贴以下内容的话，有三点需要注意，一是必须是已有内容的页面；二是如果是通过复制黏贴代码到浏览器地址栏的话，IE 及 Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而 Firefox 中虽然不会自动去掉，但它根本就不支持在地址栏运行 JS 代码；三是引用的carnival.js会依赖JQuery（没有的话也没事，只是页面少了一个倾斜的效果）。

javascript: void (function () {
  var d = document,
    a = \'setAttribute\',
    s = d.createElement(\'script\');
  s[a](\'tyle\', \'text/javascript\');
  s[a](\'src\', \'https://nd002723.github.io/carnival/js/carnival.js\');
  d.head.appendChild(s);
})();

• 一个能让你的网站 high 起来的 js

第五十六式：昔时金阶白玉堂，即今唯见青松在 —— 浏览器隐身模式真的可以隐身吗？

隐身模式与设备唯一标识

  我们都知道，浏览器隐身模式可以让别人无法知道你都访问了什么网站和做了什么操作，在隐身模式下，打开的网页和下载的文件不会记录到您的浏览历史记录以及下载历史记录中。在你关闭打开的全部隐身窗口后，系统会删除所有新 Cookie。但是，隐身模式真的就隐身了吗？多次通过隐身模式访问同一网站，就真的无法识别你已经访问过了吗？如果真是这样，那绝对是一个刷 UV（unique visitor）的利器了，尝试了下 个人博客，还真是这样（我使用的是不蒜子），那以后谁的 UV 能有我多啊，