I figured I'd post an additional answer to this already mega-sized Stack Overflow question because the top answer has another comment linking to a Gist with the JavaScript implementation of Ankerl's logic and that link is broken (404). The top voted comment of the top answer suggests that Martin Ankerl's approach is better than random hex numbers, and although I haven't improved on Ankerl's methodology, I have successfully translated it to JavaScript. If you wish to see what this looks like in action see Simple JavaScript Rainbow Color Generator for Google Map Markers. This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps. This function generates vibrant, "evenly spaced" colours (i.e. * step: The step number, means the order of the color * numOfSteps: Total number steps to get color, means total colors This is perfect for creating pop-out markers in Google Maps that have optimal "uniqueness" (that is, no two markers will have similar colors). To ensure the colors are distinct I avoid using a random generator and select "evenly spaced" colors from the rainbow. To make the numbers fit, we round down the numbers, using Math.floor(), so we start at 0 and the possible numbers matches the number of items/jokes.My goal was to create vibrant and distinct colors. The calculations using Math.random() * Joke_lmnt.length will give a decimal number, and we need an integer, so we have to round off. if you have 10 items/jokes, you have the numbers 0 to 9, not 1 to 10. The list, when done using getElementsByTagName(), starts with numner 0, i.e. The command Math.random() handles the selection of a random number in the interval [0 1[, and by multiplying with the number of items found using Joke_lmnt.length (like this: Math.random() * Joke_lmnt.length), the possible random numbers will be in an interval equivalent to the number of items/jokes. It has to be an integer, and the range in which to choose, has to be thee same as the number of items on the list, i.e. Var Joke_lmnt = xmlDoc.getElementsByTagName("text_string") Here we place the file Jokes.xml in the same directory as the HTML file, and then the first line in the script looks like this: How this is constructed, you can see here (Remember to upload the script in the page's HEAD tag, as described). The first thing to do, in order to use external lists, is getting access to them. With the coyote, you usually see skid marks.]]> Because the chicken needed a day off!]]> The child stared at him open mouthed and horrified for a minute, then gasped, "Didn't you get my E-mail?"]]> The code to be written, where you want image and link placed, is: We can now call the file from wherever we want the image and link show on the page. The code at it is done here, has to be saved in a separate file, which we call MovieRecommendations.js and place in the directory JavaScripts. RandomNumber = Math.floor(Math.random() * images.length) The calculated value we call RandomNumber in this example, and the code looks like this: For 17 items, the routine will always give you an integer in the interval 0 to 16. In JavaScript you can round off by using floor(), which will always round down, ceil() (an abbreviation for ceiling), which will always round up, and round(), which will round up or down, depending on the decimal. All the number on the images are integers, so getting a decimal number is no good. Math.random() * images.length, you get numbers going from 0 to just below 17. You have 17 items, so by multiplying Math.random() with images.length, i.e. When it comes to the number of items, you have to be a bit careful. Updating the code is less troublesome, using images.length, so that solution is definitely recommended. You can of course also write the actual number, but then you have to remember to adjust the code here, every time you add or remove items. In math this interval is written as as an array, we can find the number of items on the list by using. JavaScript can only do randomization of numbers by using Math.random(), which select a random number between 0 and 1, excluding 0 and including 1. In the actual code, you have the full path written, obviously. The paths to links and images are truncated to make the example more readable.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |