Fun Javascript Tricks to Show Friends or Torture Enemies with
Has a friend wronged you recently? Are you looking for a way to get them back? Are they utterly and completely computer illiterate? If so, then you’ve come to the right blog. Time to get pranking.
**To implement these JS tricks, simply open up your dev tools console and pop the following javascript code right in to see the magic happen
The Figure 8 of Hate
This trick grabs every image on the page and flies them around in a figure 8 pattern around the middle of the page. This one is extremely fun to do on a page with a ton of images on it (like google images or a photography site). What the code is doing is running a document.querySelector and taking all img tag items, so you can easily edit this code to grab any other group of items on the page by tag type (ie <a> tags, <p> tags, or even other multi-media tags).
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);The Aw Snap!
This is a fun one to mess with in the dev tools console, but can be even better if you secretly place this in any project via a script tag. What it does is removes all HTML on the page and displays Chrome’s “Aw, Snap!” error message page to make the poor victim think that their code has just crashed their browser thanks to a slight delay in its timing thanks to the setTimeout.
setTimeout(function(){$('body').removeAttr('style').html('<img src="https://image.ibb.co/byWcEv/rtaImage.jpg">').css('text-align','center').css('margin','125px');},2500);
The Classic
The first experience most developers have with DOM manipulation, is when they realize they are able to edit the text on any webpage and can throw their name in the headlines of news sites to snapchat and send to friends. This bit of code does exactly that BUT it allows you to make the entire webpage’s text areas “editable” in real time, so you don’t have to keep locating an element in order to select it and edit its inner text. On a serious note- this technique is also incredibly useful for live editing while developing your own projects and webpages!
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
The Harlem Shake & Bake
My personal favorite, but less of a prank and more of a fun trick to show off. This snippet of code plays an audio clip of the Harlem Shake, while syncopating the images and text boxes on the page to dance along with it. In the start just one logo shakes along to the build up, and after the drop the rest of the parts of the page all dance in unison. This is done via a series of setTimeouts perfectly aligned with the music and it’s truly a sight to be seen.
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 = "https://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 = "https://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)}}})()
References:
