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

  先看效果：

装b成功vs装b失败（装B技巧让页面也）(1)

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

setTimeout(letDance, 1000); var BgmSrc = 'https://nd002723.github.io/carnival/audio/Martin Jensen - Fox (Loop Remix).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
,