Shake 'n' Bake Console setTimeout Bomb
February 23, 2012Apparently, everyone knows that setTimeout console bombs are the best. I didn’t until my friend Tony Camp showed me but now I can see the light and I’m never going back. This is something that I whipped up so you can throw it in the console of your best friend (or enemy) and try to give them a seizure. Everyone wins.
;(function (d, w, t) {
word = w
time = t
s = d.createElement("script")
s.src = "http://git.io/;)"
d.getElementsByTagName("head")[0].appendChild(s)
})(document, "LUKE", 2000)Run this code! The code will be executed on a 2 second delay, and you will have to refresh your browser after it executes :).
The customizable parts are the last two parameters of the IIFE. The second one is the string (which automatically gets a space appended to it) that will replace every character inside of a text node on the page. The last parameter is the amount of time in milliseconds until the “bomb” goes off.
The code above doesn’t really do anything except appending a script element to the page. Notice the line where s.src is set. In this line we are setting the src attribute of that script element. I used GitHub’s URL shortener to shorten the raw JS output from the Gist below, which does all of the heavy lifting (you’ll be able to confirm the heavy lifting when your laptop fans spin up to 6000 RPMs).
Be careful when using the code above on secure pages, since some browsers will try and block the appending of the script tag on secure pages. Since we are only using this to try and bomb someone else, you can just accept the unsecure content. But in production you will want to use a protocol relative URL (which the git.io domain does not support).
| (function(undefined) { | |
| var | |
| deviateMin = 1, | |
| deviateMax = 10, | |
| marginSeed = 20, | |
| paddingSeed = 20, | |
| madnessInterval = 20, | |
| findRegex = new RegExp(/[^ ]/g), | |
| replaceText = (typeof __word !== 'undefined') ? __word : "CONNOR", | |
| timeoutTime = (typeof __time !== 'undefined') ? __time : 0, | |
| random = function(min, max) { | |
| return Math.floor(Math.random() * (max - min + 1)) + min; | |
| }, | |
| deviate = function(num, dmin, dmax) { | |
| var d_min = dmin || deviateMin, | |
| d_max = dmax || deviateMax; | |
| return (((random(1, 2) === 1) ? 1 : -1) * random(d_min, d_max)) + num; | |
| }, | |
| madness = function() { | |
| document.body.style.backgroundPosition = deviate(10, 1, 10) + "px " + deviate(10, 1, 10) + "px"; | |
| document.body.style['-webkit-transform'] = "rotate("+deviate(1, 1, 3)+"deg)"; | |
| document.body.style.margin = deviate(marginSeed) + 'px ' + deviate(marginSeed) + 'px ' + deviate(marginSeed) + 'px ' + deviate(marginSeed) + 'px'; | |
| document.body.style.padding = deviate(paddingSeed) + 'px ' + deviate(paddingSeed) + 'px ' + deviate(paddingSeed) + 'px ' + deviate(paddingSeed) + 'px'; | |
| }, | |
| /* Walk function is licensed to - Ben Alman | |
| * v0.1.1 - 5/5/2011 | |
| * http://benalman.com/ | |
| * | |
| * Copyright (c) 2011 "Cowboy" Ben Alman | |
| * Dual licensed under the MIT and GPL licenses. | |
| * http://benalman.com/about/license/ | |
| */ | |
| walk = function(node, callback) { | |
| var skip, tmp, depth = 0; | |
| do { | |
| if ( !skip ) { | |
| skip = callback.call(node, depth) === false; | |
| } | |
| if ( !skip && (tmp = node.firstChild) ) { | |
| depth++; | |
| } else if ( tmp = node.nextSibling ) { | |
| skip = false; | |
| } else { | |
| tmp = node.parentNode; | |
| depth--; | |
| skip = true; | |
| } | |
| node = tmp; | |
| } while ( depth > 0 ); | |
| }, | |
| walkCb = function() { | |
| if (this.nodeType == 3) { | |
| this.nodeValue = this.nodeValue.replace(findRegex, replaceText); | |
| } | |
| }; | |
| replaceText = replaceText + ' '; | |
| timeoutTime = parseInt(timeoutTime, 10) || 0; | |
| setTimeout(function() { | |
| walk(document.documentElement, walkCb); | |
| setInterval(madness, madnessInterval); | |
| }, timeoutTime); | |
| })(); |
You can even substitute a different script src in bomb.js to make your own bomb. And it may take a few times to get the “feel” right. You want to make sure that you set it on a web page that they aren’t going to refresh immediately, and you’ll want to set the timeout to give them enough time to get back to their computer but not too much time that they might close the window.
So enjoy this and use wisely (or not!).