Some years ago, while I was writing my master thesis (I have two of them in two different languages), I remember that I was told that I should write something that is not written before and I should convince the reader why it is interesting. Now, I do not have to convince the reader anything, I simply code what I like and what I am currently learning. Thus, if you write “random jQuery” in google you would probably get about 3 pages of great ways to make ransoms in jQuery.
Anyway, I wanted to receive a way to make a random number in random font and background color. Thus, I have received the following result:
This article would be published on national holiday of Bulgaria, thus happy union day! Especially for the national holiday I have played with the random to achieve a result like this:
The question is how? 🙂 With jQuery of course.
Here comes the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html> <head> <title>JQ 10</title> <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready(function () { $("div").each(function(i){ $("div").eq(i).html(Math.random()); var colors = ["blue","orange","gray","red","purple","white","green","AliceBlue","gold","SeaShell"]; var random_back = colors[Math.floor(Math.random() * colors.length)]; $('div').eq(i).css('background-color',random_back); var random_font = colors[Math.floor(Math.random() * colors.length)]; $('div').eq(i).css('color',random_font); }) }); </script> </head> <body> <ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> </ul> </body> </html> |
Here is the code in GitHub.
That is all! 🙂