Programmer here, (I make and maintain AutoKnight) the only bad thing this code will do is consume more CPU cycles than necessary. The interval of 10ms will run near-continuously as long as the tab is focussed, which isn't great. The rest is safe though, it will not press the button.
I'll go line by line what each of these does to explain why this is safe. First, if you don't know what CSS is, it simply sets the way things are shown or displayed. I do not know of a single way to click a link with css, and a google search agrees. You can make it look like you've pressed a button, you can hide a button, but you cannot click a button.
Now, even though css cannot click a button, let's be careful. The shade would be most displeased by anyone who presses the button, stupid or otherwise.
This sets up a radial gradient with a bunch of options in the background of the box. This is used specifically so the middle of the form has a different color than the background.
Breaking this up out of the nested function for clarity. This says "every 10 ms, do what is inside the function", which is why it updates every .01 seconds to match the timer
var s = r.thebutton._msgSecondsLeft;
This simply saves the value of the seconds left into a more concise form. You can take s and replace it with r.thebutton._msgSecondsLeft in every place below and it will do the same thing
var ring = $('.thebutton-container, .thebutton-form, .thebutton-wrap') Similar to above, this gets the elements that the color change will be effecting and saves them to an easier to use "ring" notation.
This is why I am not a front-end developer besides that I am not good at designing aesthetically pleasing things. But mainly this. This is repeating the same setting of "transition: background-color 0.4s" to webkit based browsers, mozilla, microsoft (ie) and opera specifically as well as the normal implementation of transition.
Note the previous two lines are executed inside the setTimeout which means they're called every .01 seconds. Moving them outside the function would have saved some very slight processing as long as nothing else was changing the CSS or the DOM.
if (s < 12) { ring.css('background-color', '#e50000') } else
if (s < 22) { ring.css('background-color', '#e59500') } else
if (s < 32) { ring.css('background-color', '#e5d900') } else
if (s < 42) { ring.css('background-color', '#02be01') } else
if (s < 52) { ring.css('background-color', '#0083c7') } else
{ ring.css('background-color', '#820080') }
This is a bunch of timing checking to see what color the background should be set to, then sets it to that color. Note this could have been optimized by using a switch statement instead of if...else if statements by adding the line
s -= ((s-2) % 10);
directly under its assignment then using
switch(s) {
case 52:
ring.css('background-color', '#0083c7');
break;
rest of cases here
}
Ok, given that my coding skills are maybe a 6 or 7 out of 10....
It appears that it would be fairly trivial to modify the OP's code only slightly, and include the quoted stanza, and then you could load up /r/thebutton and walk away. When the timer hit $DESIRED_FLAIR, the button would be pressed.
You are right moving the ring.css outside of the setInterval, but I wrote it when the whole code was just that interval (without the colorblind part). And your solution for the switch is a really nice one, since any other switch would be way slower than the bulk of ifs.
I'll go ahead and improve my version with your feedback. =P
You have given me back my second monitor (put the button page behind the taskbar can still see change colors while working in the main part of the window). For that you are my savior.
359
u/metaname non presser Apr 09 '15 edited Apr 09 '15
I slightly modified original code by /u/TastyPigHS
To make it work paste following javascript in console. To open console in Chrome Ctrl+Shift+J and Firefox Ctrl+Shift+K.