9 Funniest JavaScript effects

The Internet is getting more and more important, we can use it for working, learning, for entertaining ... Only in the aspect of entertainment, we use the Internet to play the online games, to search, listen & download the favorite songs, videos, movies, ...

The Internet also is the very good environment for studying, it helps us in looking for the materials, solving our problems, getting the supports from the other persons, ... Especially in the field of computers in general, the web programming in particular; many people think the programming languages are only for working, there's no joy in it.

Sampled by © JavaScriptBank.com

Everybody knows the Internet is the environment that we can use for a lot of things. The Internet is getting more and more important, we can use it for working, learning, for entertaining ...

Only in the aspect of entertainment, we use the Internet to play the online games, to search, listen & download the favorite songs, videos, movies, ...

The Internet also is the very good environment for studying, it helps us in looking for the materials, solving our problems, getting the supports from the other persons, ... Especially in the field of computers in general, the web programming in particular; many people think the programming languages are only for working, there's no joy in it.

That's reason I make this post, I just want to say to all: with JavaScript, you can find some little joys; JavaScript can make many funny things that you ever realize. Here's list of funniest things JavaScript can do.

Updated: April 16th, 2013

1. Pictures flying as a snake around the mouse pointer

Pictures flying as a snake around mouse pointer
Just paste the JavaScript below into the address bar of any browser then press Enter, it makes all pictures on the current web page fly around like a snake when you move the pointer.
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; var 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++}tag=setInterval('A()',5 );document.onmousedown=function(){clearInterval(tag);for(i=0; i<DIL; i++){DI[i].style.position="static";}}; void(0)

In the above JavaScript, you can change
document.getElementsByTagName("img") to any HTML tag that you want to apply.


Here's some another versions of this effect:
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.images;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;DIS.top=Math.cos(R*y1+ i*y2+y3)* y4+y5;} R++;}setInterval('A()',5);void(0);


2. Transform the web page into the eaditable mode

Transform the web page into the eaditable mode
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
This JavaScript code lets you modify any web page in real-time; and with Firefox, you can even save the modified web pages to your computer. You can do many funny things with the simple JavaScript above, such as: faking the screen capture of some proof, faking some hot news for April Fool's Day... quickly.


3. You must love me

You must love me
Give your lover the link of this effect, then ask her to answer the question "Do you love (marry) me?" and she can't repudiate, lol
<html>

<head>
<title>You must love me</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="copyright" content="http://www.javascriptbank.com" />
<script type="text/javascript">
flag=1
function f1()
{
alert("Yes. you are right ")
}
function f()
{
if(flag==1)
{
Bn.style.top=90
Bn.style.left=500
flag=2
}
else if(flag==2)
{
Bn.style.top=90
Bn.style.left=50
flag=3
}
else if(flag==3)
{
Bn.style.top=235
Bn.style.left=360
flag=1
}
}
</script>
</head>
<body>
<h1 style="position:absolute; left:220px; top:175px; width:auto; height:210px;">Do you love me?</h1>
<div id="By" style="position:absolute; left:285px; top:235px; width:210px;
height:210px;">
<input type="button" value=" YES " onclick="f1undefined)" />
</div>
<div ID="Bn" style="position:absolute; left:360px; top:235px; width:210px; height:210px;">
<input type="button" value=" NO " onmouseover="fundefined)" />
</div>
</BODY>
</html>


4. Joking Error Message Alert box

Joking Error Message Alert box
Like the above funny JavaScript but this script uses the picture to make the choices; maybe from the idea of this joke plus some different pictures, you can make more funny jokes.


5. The text based Cheerleader Animation

The text based Cheerleader Animation
No need to say more about it, let try it out by yourself.
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Web Site: http://www.crosswinds.net/~llizard -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("mac") != -1)
var a="\r";
else
var a="\n";
var max=0;
function tlist() {
max=tlist.arguments.length;
for (i=0; i this[i]=tlist.arguments[i];
}
tl = new tlist(
" o"+a+
" /|\\"+a+
" */ \\* ejm97"+a,

" o_"+a+
" \<| *"+a+
" *\>\\ ejm97"+a,

" _o/*"+a+
" * |"+a+
" / \\ ejm97"+a,

" *\o_"+a+
" / *"+a+
" \<\\ ejm97"+a,

" _o/*"+a+
" * |"+a+
" / \\ ejm97"+a,

" *\\c/*"+a+
" )"+a+
" / \> ejm97"+a,

" *"+a+
" \\__/c"+a+
" \> \\* ejm97"+a,

" __/"+a+
" (o_*"+a+
" \\* ejm97"+a,

" \\ /"+a+
" |"+a+
" */o\\* ejm97"+a,

" \\_"+a+
" ("+a+
" */o\\* ejm97"+a,

" \<_"+a+
" __("+a+
" * o|* ejm97"+a,

" /_"+a+
" __("+a+
" * o|* ejm97"+a,

" ___"+a+
" *\/ \>"+a+
" o|* ejm97"+a,

" *"+a+
" o|_/"+a+
" */ \\ ejm97"+a,

" *"+a+
" _o|_"+a+
" * \>\\ ejm97"+a,

" _o/*"+a+
" * |"+a+
" / \\ ejm97"+a,

" *\\o/*"+a+
" |"+a+
" / \\ ejm97"+a,

" c/*"+a+
" \<\\"+a+
" */\\ ejm97"+a,

" c__"+a+
" \<\ *"+a+
" */\\ ejm97"+a,

" c__"+a+
" /\ *"+a+
" * /\> ejm97"+a,

" c/*"+a+
" /(__"+a+
" * / ejm97"+a,

" __o/*"+a+
" * (__"+a+
" \< ejm97"+a,

" __o_"+a+
" * / *"+a+
" \<\\ ejm97"+a,

" *_o_"+a+
" | *"+a+
" \< \\ ejm97"+a,

" *_c_*"+a+
" |"+a+
" \>\\ ejm97"+a,

" *_c_*"+a+
" |__"+a+
" \> ejm97"+a,

" *_c_*"+a+
" __|__"+a+
" ejm97"+a,

" "+a+
" *_c_*"+a+
" __)__ ejm97"+a,

" "+a+
" *\\c/*"+a+
" __)__ ejm97"+a

);
var x=0;
function tick() {
document.animation.cheerleader.value = " " + a +
tl[x];
x++;
if (x != max)
setTimeout("tick()", 200);
else
x = 0;
}
// End -->
</script>
</HEAD>

<BODY OnLoad="tickundefined)">

<center>
<form name=animation>
<textarea name=cheerleader rows=5 cols=20></textarea>
<br>
<input type=button value="Start Again" onClick = "javascript:tickundefined)">
</form>
</center>

</html>

6. Faking Textarea on Typing

This funny script made to prove that you're too trusting of people. Don't believe me? Just check it by yourself. <html>

<head>
<title>Faking Textarea on Typing</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="copyright" content="JavaScriptBank.com" />
<script language="javascript">
<!-- done by JOHN CHACKO- [email protected]!>
status="john chacko !!!!!"
var a=new Array(),n=""
a[1]='I';a[2]=' ';a[3]='A';a[4]='M';a[5]=' ';a[6]='A';a[7]=' ';a[8]='F';a[9]='O';a[10]='O';a[11]='L';a[12]=' ';a[13]=' ';a[14]='?';
function one()
{
t=document.f.txt.value
j=t.length
if(j>0)
{
for(var i=1;i<=j;i++)
{
n=n+a[i]
if(i==14)
{
document.f.txt.value=""
n=""
}
}
}
document.f.txt.value=n
n=""
setTimeout("one()",1)
}
function on()
{
one()
}
</script>
</head>
<body onload="onundefined)">
<center>
<h2>Type anthing slowly</h2>
<form name="f">
<textarea name="txt" cols="20" rows="5">
</textarea>
</center>
</form>
</body>
</html


7. Unclosable Window

Yeah, you should recheck your mind carefully before run this script, maybe it will not be funny; and you have to enable popup for this damn script, lol.
<html>

<head>
<title>Unclosable Window</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="copyright" content="JavaScriptBank.com" />
<script language=JavaScript>
/*
Source of MainPart: Stefan M�nz, Selfhtml 7.0, tecb.htm
*/

activ = window.setInterval("Farbe()",100);
i = 0, farbe = 1;
function Farbe() {

if(farbe==1) {
document.bgColor="FFFF00"; farbe=2; }
else {
document.bgColor="FF0000"; farbe=1; }
i = i + 1;

//if you don't want to freeze the browser uncommend the next two lines
//if(i >= 50)
//window.clearInterval(activ);
}

function erneut(){
window.open(self.location,'');
}
window.onload = erneut;
</script>
</head>
<body>
<h1>Unclosable Window</h1>
</body>
</html

8. Shaking the browser window for a while

Change the dimension of your browser window to Normal mode, maybe a half of the screen resolution is best; then run the code below by pasting it into the address bar and codessing the Enter key.
javascript:function Shw(n) {if (self.moveBy) {for (i = 35; i > 0; i--) {for (j = n; j > 0; j--) {self.moveBy(1,i);self.moveBy(i,0);self.moveBy(0,-i);self.moveBy(-i,0); } } }} Shw(6)


9. Love Tester

Love Tester
A small JavaScript to test the love compatibility' between two people. I & this script are not responsible for any broken relationship you tried, lol.
<html>

<head>
<title>Love Tester</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="distribution" content="Global" />
<meta name="copyright" content="JavaScriptBank.com" />
</head>
<body>
<center>
<h1>Love Tester</h1>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function calc() {

first = document.loveform.name1.value.toUpperCase();
firstlength = document.loveform.name1.value.length;
second = document.loveform.name2.value.toUpperCase();
secondlength = document.loveform.name2.value.length;
var LoveCount=0;

for (Count=0; Count < firstlength; Count++) {
letter1=first.substring(Count,Count+1);
if (letter1=='L') LoveCount+=2;
if (letter1=='O') LoveCount+=2;
if (letter1=='V') LoveCount+=2;
if (letter1=='E') LoveCount+=2;
if (letter1=='Y') LoveCount+=3;
if (letter1=='O') LoveCount+=1;
if (letter1=='U') LoveCount+=3;
}

for (Count=0; Count < secondlength; Count++) {
letter2=second.substring(Count,Count+1);
if (letter2=='L') LoveCount+=2;
if (letter2=='O') LoveCount+=2;
if (letter2=='V') LoveCount+=2;
if (letter2=='E') LoveCount+=2;
if (letter2=='Y') LoveCount+=3;
if (letter2=='O') LoveCount+=1;
if (letter2=='U') LoveCount+=3;
}

amount=0;
if (LoveCount> 0) amount= 5-((firstlength+secondlength)/2)
if (LoveCount> 2) amount= 10-((firstlength+secondlength)/2)
if (LoveCount> 4) amount= 20-((firstlength+secondlength)/2)
if (LoveCount> 6) amount= 30-((firstlength+secondlength)/2)
if (LoveCount> 8) amount= 40-((firstlength+secondlength)/2)
if (LoveCount>10) amount= 50-((firstlength+secondlength)/2)
if (LoveCount>12) amount= 60-((firstlength+secondlength)/2)
if (LoveCount>14) amount= 70-((firstlength+secondlength)/2)
if (LoveCount>16) amount= 80-((firstlength+secondlength)/2)
if (LoveCount>18) amount= 90-((firstlength+secondlength)/2)
if (LoveCount>20) amount=100-((firstlength+secondlength)/2)
if (LoveCount>22) amount=110-((firstlength+secondlength)/2)

if (firstlength==0 || secondlength==0) amount= "Err";
if (amount < 0) amount= 0;
if (amount >99) amount=99;

document.loveform.output.value=amount+"%";
}
// End -->
</script>

<form name=loveform>

<input value="Bill Clinton" name="name1" type="text" size="20"> +
<input value="Monica Lewinsky" name="name2" type="text" size="20"> =
<input value="" name="output" type="text" size="6">
<br>
<br>
<input value="Calculate!" name="calculate" type="button" value="calculate"
onclick="calcundefined)">
</form>
</center>
</body>
</html

Simple & Funny Games by JavaScript

Simple & Funny Games by JavaScript
In the end of this list, maybe this is not a script, I just want to list some resources that you can play some JavaScript games for relaxing. Certainly, the games made by JavaScript will be simple but they're not boring any; they're really games that you can find a little of fun.
- Game Scripts
- 25 Amazing JavaScript Games
- JavaScript Gaming
- Free JavaScript Games Download
- Free JavaScript Games

Conclusion

Some JavaScript codes can be executed in the address bar of browser immediately, others must be used as a HTML file for affecting. But I hope you'll like this post and find some funny things; if you know anymore, please let me know.

Author

Phong Thai Phong Thai is a Web Developer, Web Coder for 20 years with PHP, JavaScript, CSS. He is the creator of JavaScriptBank.com - provide thousands of free JavaScript code examples, web development tips and tricks, helpful blogging guides.

Follow him on twitter@js_bank or connect with him on facebook@jsbank if you want. His websites for your knowledge: javascriptON.com, inOneSec.com, www.gomymobi.com

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
Insights for Advanced Zooming and Panning in JavaScript Charts
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website


Top view articles
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Top 10 Beautiful Christmas Countdown Timers
Top 10 Best JavaScript eBooks that Beginners should Learn
65 Free JavaScript Photo Gallery Solutions
16 Free Code Syntax Highlighters by Javascript For Better Programming
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design

Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com