学了点技术，我要开始装X了（一）-阿里云开发者社区

第一式：你见过页面跳舞吗？

还记得魔性的小苹果和抖音吗，作为前端的你，有想过让页面也 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' "a");
  s[a]('src', 'https://nd002723.github.io/carnival/js/carnival.js' "a");
  d.head.appendChild(s);
})();

一个能让你的网站 high 起来的 js^[1]

第二式：一个可以拿来装逼的题库

作为程序员，需求无处不在，bug 无处不在，自然，装逼也可以无处不在。回想你的每一次面试，是否曾被面试官鄙视或者秀一脸？回想你和同事的每一次交流，是否曾被同事展示的古怪面试题或者奇技淫巧搞的无语难受 😓，想秀回去却苦于一时“脑中羞涩”，JavaScript Puzzlers!^[2]就是一个收录的各种表态 JavaScript 题目的网站，有了它，现在妈妈再也不怕我找不到可以装逼的代码/题目了。

我们不妨先看几道题目：

var min = Math.min(),
  max = Math.max();
min < max; // 答案: false
// 有趣的是, Math.min 不传参数返回 Infinity, Math.max 不传参数返回 -Infinity 😆
// 这个还是相对容易的
var name = 'World!';
(function () {
  if (typeof name === 'undefined') {
    var name = 'Jack';
    console.log('Goodbye ' + name);
  } else {
    console.log('Hello ' + name);
  }
})();
// 答案：Goodbye Jack
'1 2 3'.replace(/\d/g, parseInt); // 答案: 1, NaN, 3

不，我是一个前端工程师，工程师的事儿，能叫装逼么？也许它是没有太大用处的脑筋急转弯，但是这叫小技巧后面藏着的大智慧，哈哈～

话说回来，这些变态题目涉及的知识点很广，如果你能掌握这些题目背后的原理，也许就会对 JavaScript 的理解有一个不小的提升，下面将题目奉上，供诸君参阅：

目前由于未知原因，也许是去装逼答题的太多了吧 😄，JavaScript Puzzlers!^[3]网站已不可访问，所幸您还可以通过下面两个 GitHub 链接查看具体的题目及解析。

44 个 Javascript 变态题解析 (上)^[4]

44 个 Javascript 变态题解析 (下)^[5]

JavaScript Puzzlers!^[6]

第三式：浏览器地址栏，🐂🍺克拉斯

作为一名前端开发者，我们甚至每天与浏览器相伴的时间比女朋友/男朋友（如果有的话 😄）陪伴你的都要久，想想那每一个令人“不是那么期待”的早晨，每一个争分夺秒完成任务的黄昏，只有浏览器和编辑器一直是你忠实的伙伴，那么，你了解浏览器吗？了解那个每天都要输入http://localhost:3000/的地址栏吗？本节带你认识那些关于地址栏的好玩儿的细节。

浏览器地址栏运行 JavaScript 代码

对，你没看错，在“浏览器地址栏运行 JavaScript 代码”，做法是以javascript:开头后跟要执行的语句。需要注意的是如果是通过复制、黏贴代码到浏览器地址栏的话，IE 及 Chrome 会自动去掉代码开头的 javascript:，所以需要手动添加起来才能正确执行。并且，你需要在网站的地址栏运行javascript:，而不能在新打开的空标签页面上运行，那样也不会生效。

// 点击确定后，会接着弹出：孤舟蓑笠翁，独钓寒江雪，点击取消则不会弹出
javascript: if (confirm('千山鸟飞绝，万径人踪灭'))
  alert('孤舟蓑笠翁，独钓寒江雪');

浏览器地址栏运行 JavaScript 代码

浏览器地址栏运行 HTML 代码

如果说在“浏览器地址栏运行 JavaScript 代码”知道的人还算多的话，在“浏览器地址栏运行 HTML 代码”知道的人就要少一些了，在非 IE 内核的浏览器地址栏可以直接运行 HTML 代码！在地址栏输入以下代码然后回车运行，会出现下图所示的页面：

data:text/html,
<h1>Nothing is given, Everything is earned!</h1>

浏览器可以是你的记事本

这个还是在浏览器地址栏上面做文章，将以下代码复制粘贴到浏览器地址栏，运行后浏览器就变成了一个简单原始的编辑器，话不多说，直接试试吧。

data:text/html,
<html contenteditable></html>

另外，补充一个万能的浏览器撤销关闭页快捷键：MAC OS 下，command + shift + t；Windows：ctrl + shift + t。这个重新打开被关闭的页面的快捷键，可以一直按，会依次恢复被关闭的页面哟～，要不，看看小伙伴都干了些什么，看看会不会被打 😜

参考资料：这些鲜为人知的前端冷知识，你都 GET 了吗？

学了点技术，我要开始装X了（一）

第一式：你见过页面跳舞吗？

第二式：一个可以拿来装逼的题库

第三式：浏览器地址栏，🐂🍺克拉斯

浏览器地址栏运行 JavaScript 代码

浏览器地址栏运行 HTML 代码

浏览器可以是你的记事本

热门文章

最新文章

相关课程

相关电子书

相关实验场景