讓網頁跳哈林(Harlem Shake)

3 / 10, 2013 JS , 好笑好玩 , 網路安全

最近不知道哪裡來的熱潮,竟然出一種「亂跳舞」叫做哈林(Harlem Shake),但誰說一定要人跳,網頁當然也能跳舞囉~只要使用Chrome,就可以享用這個功能!沒錯!網頁能跳哈林!還有背景配樂,不用任何電腦程式基礎就能用啦!馬上來看看~


首先對任意網頁按右鍵->檢查元素->Console,然後輸入以下內容

javascript:
(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}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 d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}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 S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;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 e=30;var t=30;var n=350;var r=350;var i="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";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 f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()

以上內容來自http://www.vir.ph/harlem
最後按下Enter,就完成啦!
註:如果有跳出「undefined」,是正常的,大概等幾秒鐘,哈林就開始了
以下是本方法的來源和實際效果:

以下是以超級電腦網為例做的測試

很抱歉由於小弟實在不會操做Quicktime,所以就沒聲音了….所以記得開註解,裡面有寫音樂是從何時開始,另外,裡面拍到的那廣告…..自動省略謝謝
註:此方法原本屬於FB,之後發現好像所有網站都能用~只是如果非FB,一開始只有音樂,其他啥都沒有搖~


感謝Licson Lee通知,此方法再Firefox、Safari、、Opera、IE10都適用

  • Joe

    其實弄到我的最愛裡面就行了

    • s3131212

      是啊(我的最愛是IE用語吧,請考慮使用chrome)

      • Joe

        我一直以來都使用chrome beta(不知道為啥,總感覺這個比較快),還有,反正就網址列下面那一條,我都沒注意它叫什麼名字吔!

        • s3131212

          Chrome Beta正式名字是「Chromium」,網址下面那一列是「書籤列」

  • Try this one:

    (function () { function l(a) { var b = a.offsetHeight; a = a.offsetWidth; return b > q && b s && a < t } function m() { for(var a = document.getElementsByClassName(f), b = RegExp("\b" + f + "\b"); 0 < a.length;) a[0].className = a[0].className.replace(b, "") } var q = 20, s = 20, r = window.innerWidth, t = window.innerHeight, f = "mw-harlem_shake_me", n = ["im_drunk", "im_baked", "im_trippin", "im_blown"], p, c = document.documentElement; p = window.innerWidth ? window.innerHeight : c && !isNaN(c.clientHeight) ? c.clientHeight : 0; var g; g = window.pageYOffset ? window.pageYOffset : Math.max(document.documentElement.scrollTop, document.body.scrollTop); for(var c = document.getElementsByTagName("*"), h = null, e = 0; e = g && d <= p + g) { h = a; break } } } if(null === a) console.warn("Could not find a node of the right size. Please try a different page."); else { a = document.createElement("link"); a.setAttribute("type", "text/css"); a.setAttribute("rel", "stylesheet"); a.setAttribute("href", "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css"); a.setAttribute("class", "mw_added_css"); document.body.appendChild(a); a = document.createElement("audio"); a.setAttribute("class", "mw_added_css"); a.src = "//dl.dropboxusercontent.com/s/ca0vxdy1i4ms0xb/Harlem%20Shake.mp3"; a.loop = !1; a.addEventListener("canplay", function () { setTimeout(function () { h.className += " " + f + " im_first" }, 500); setTimeout(function () { m(); var a = document.createElement("div"); a.setAttribute("class", "mw-strobe_light"); document.body.appendChild(a); setTimeout(function () { document.body.removeChild(a) }, 100); for(var b = 0; b < k.length; b++) { var c = k[b]; c.className += " " + f + " " + n[Math.floor(Math.random() * n.length)] } }, 15500) }, !0); a.addEventListener("ended", function () { m(); for(var a = document.getElementsByClassName("mw_added_css"), b = 0; b < a.length; b++) document.body.removeChild(a[b]) }, !0); a.innerHTML = " If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser. “; document.body.appendChild(a); a.play(); for(var k = [], e = 0; e < c.length; e++) a = c[e], l(a) && k.push(a) } })();

    This is the modified one by me that dances even more longer.

    • s3131212

      I’m sorry,but it doesn’t work for me.

      • Actually, that’s me. I’m now posting the one that really works.

        (function(c){var b=c.getElementsByTagName(“head")[0];a=c.createElement(“script");a.type="text/javascript";a.src=unescape(“%2F%2Fdl.dropboxusercontent.com%2Fs%2F82526m7wt4vpesr%2Fharlem-shake.js");a.async=true;b.appendChild(a);})(document);

        Try it!

        • s3131212

          It work very good!

    • Actually, that’s me. I’m now posting the one that really works.

      (function(c){var b=c.getElementsByTagName(“head")[0];a=c.createElement(“script");a.type="text/javascript";a.src=unescape(“%2F%2Fdl.dropboxusercontent.com%2Fs%2F82526m7wt4vpesr%2Fharlem-shake.js");a.async=true;b.appendChild(a);})(document);

      Try it!

  • 廣告很性感喔XD(學校社團課偷用電腦…)

    哀…悲慘 考完後才能再繼續用電腦QQ

    • s3131212

      我電腦課都不能用網路,老師擁有「控制權」(不過我已經破解了XD)

  • secret

    要使用Chrome….

    • s3131212

      嗯,搞不好哪天Firefox也支援了

      • I checked the code and I found it working in Chrome, Firefox Nightly, Safari, Opera and IE10.

        • s3131212

          Thanks for your notice.