JavaScript Odometer Image Generator for Blogger

I looked around a LOT for a simple web app that would allow me to generate an odometer based on simple numeric inputs. Since I didn't find any, I decided to be like the Little Red Hen and make one myself.

It's not very fancy and doesn't have a nice UI or anything, but it gets the job done. If you have a Blogger blog, you can paste this into an HTML / JavaScript gadget and just change the variables in the "mileage" array to change the numbers that display. 

Here is the javascript I used to accomplish this:

<div id="odometer"></div>
<script>

//enter additional mileage in this array:
  var mileage = [ 136, // 04/05/2014
77.5, // 04/12/2014
259, // 05/03/2014
0 ];
var miles = 0;

while (mileage.length > 0)
{
miles += mileage.pop();
}

var totalmiles = miles;

    //handle weird floating point issue   

    totalmiles = Math.round( ( totalmiles + 0.00001 ) *       10 ) / 10; 

miles *= 10;

var digits = [];
var divby = 1000000;
var dig = 0;

while (divby >= 1)
{
dig = Math.floor(miles/divby);
digits.push(dig);
miles %= divby;
divby /= 10;
}

var bdigits = [ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixfy7zp1130q44HasUzfTay4reYxWyqEp4w-TIzHLpwtUQqQLZRnEiXI80wwTZ25GaIRU1veSyoe3tTDbLjR64G4lta3j10tdTC1QyZniM3ILGc7i8qpVoKcqv3kLh9_l4W1p05k6b0fE/s1600/0b.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxmrlnK_v9MC03SBlxVsHOXCPKu-fhTw_o2tEb5KVgO37BfiticDfdWy0kYrijw_un9BD0cQ9OQ5yPcuO4RgtEVKaT0dgqBX-9UITtauUuVDQmzuWsMOotPwZqf-aI4_Jxebmqd-OWVs/s1600/1b.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuLCPvFYoPZKuN-_elrJTzUjSR0je2lw-S47RJEo3iKDGCEvD1uAX0yZGdupaKIl-AEBtDZCwKeqM9pwAQMVI7RE2uoBZiIuuROWwgAOo_anvCISMQj1_w3mfyeakMSPtDn40buLGOcoc/s1600/2b.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfvEKKrLRADzrxEEb59ZDwPQQz4eb1-IBAS5Adf-BnJEUUChZPuzcHv-nDNP2OzUgr0BrO2m_T6rBJtOnwxDkkXEjVjdwKWNi_mzVt5sKtVY0cmizPqiZasHC0Pyl-7Kcqeutf7hOx-k/s1600/3b.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-XoPOPA1hmkkLx2e3sXBgbbQh8oPFNQ8fb6nhnTVJ1rgzvnUaL3mxfvkHpTznphLsnq44yRQi0DAFG-9ocN6SM57b51Yj1TpEYisebz-brOfDVc2Xcn6AddY8slGbtr_xKKHkjxjHqFA/s1600/4b.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY9rOfRPgImbkqvaR-GJxz-QguQ1B_TdqoGAmP6w7ASen6_HyKINYcAjUu0JkFWoROwX6XVdKSAWYDtKS4YcLjNQ_ZZ75iT4_rbi-BU0PGDGr1rGF773_iYXrgyjwf0vF1JAKZuDQTwg8/s1600/5b.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQNOe0iU9pzNVB2N4E5meC2WRvlbir4A30OpuDxN9qRtyyLW_nPK8Uzc8FSPUkBwr0B3S_F42AjnlEzejAM0afj-EdxhXGrEVZxAJqSmC9tbFEH2eQ8DnbJlmVJJU9ub6YUA3GD3ccw0/s1600/6b.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg74gad-rvzcdAnun9n2okYM23syAc0Z2GILDyFdx3BaTb45fZaZ5RduAwQEMhao9kVuwnROzN0kyrTWJhcd4dRZxaoWVuWsRLLZxO-a720byt-vUD0PQ3lmboPiKogPFjTtTA3Jsd0TMk/s1600/7b.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-xUk3aLuUrSHf8E2SnlYwfN0wjq_hQzdFAWuae3RIYZcxwuu9BOF1EACIys54FZeEHNbcCg0Ds_9k4kA6wy98RD3fW3v8Qhg19TdiA_UQXuqRNBfi3hvD6lQXtm6o5Y59yaVsI8LZFwU/s1600/8b.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepHUQAZRTAFS40neIU4R6jQ0jAWw_VK9m-Pu9uqtt1x4hezd6E1GWYXcjrOf-5XP4p2Ykba6QNJUgSjRT3S3aMjJIE8yxCN6AM4pFL9VoPGDo45L7cjiewwZW0UKL-JSx3R9CzTXI1w0/s1600/9b.png"];

var wdigits = [ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMizu_Etwhvi1UtuzbbiuVyxXV48zwN1dIAxlq1IUmsFGyXXGp7rYuAeIcqWj8pEY6Qv7kf4ZV2tyPT1CZJilf7mr8JTyiaNEXGtt6w51L_mBbFYZgS-QcgthErzx1svqtEPg-fnP-oVQ/s1600/0w.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkhtApucwCIjC_bsZEhTv1JyVvQ_NCBdpOjH0z-Biub3Q6-itCUJ1npqx8MOHqY_CWCmQcYRK0314uOgqOsOPJ15Hpa4_TEtQ4o1aymGG3v8CP8sgC41KSDk4XLbDW0CTou2V0XnS8VNw/s1600/1w.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFIclCnPvVTiH4nX08RoFSq081GqQ-rnj4Ixkrb_8YZemr6W0OL-Y7m9RZ5047nOsU_yl7gsIojAJh2NNPCkxffU_SGApI5xBnSsQs9h-aG2sZwvfDJ4B_V26J6JFZTIoqVFFOrPU2pUU/s1600/2w.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx8vTAJJ7aHuEVUdhXtxd3rHr62lXJakamw8XGRJ2kkH-MDGm2c5OpEL5KUDKwln7ecyQfxMkE5GylIbzkRK9BbArbT2zm1bwIz-JI95-oTBeziMtzXok7IhLKR8zVlYpgjbzm7WrROyQ/s1600/3.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifIQl1f8KStYdl1gXJw1-JmrjVbMM_UETSQplTnU_vqdu5O8hgcKSwcHofykkWDrFLi2rOxxQgZVlTG5HKUsO5kJlAD_5R88EtsIYCtuNynDQNrKHked55Fdp0In5cd7RoAG5sZMUYCW8/s1600/4w.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhO0Y9WziM3vqsQHtQjHtLEBYXtgfhoZ3S_6TIDxiNB3KA3NXjZdUqS_w_XnKy7QjjzZL5m1laAmvkcVcMRwAm8ozx0wzaMmvqKPlPFmg0HKKVbLDTQ1EstF-iWK9Az7USjVU_Kpxbk4Q/s1600/5w.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tw-8ONTf8Duf8kQfsV_AirXt7a9MCyPIp4aDcDA5OvQuPVAKs8DksMdJ2BC150adRP6lyE7WWdNzC_TxlmUKMdEKSCD-R2cUxa2oEzNp68FkK2T3zLbe5XUGeg_Vp2GZLrfjZYGdETQ/s1600/6w.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxafYXrWUs2N-QJ3kMUUopET3XKvAVNlbDfrrtuayIGhrr14fkavHVOmShaLy_DDDZ12KxhhS1NjgCaeMeMPyVU0VaU8Tcx9cvAah0Y3neMwhSGKNHxYl6E6ZDP1AoXsmb-sxnLerUVAU/s1600/7w.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6qUbGSpHT1zmarlruZzg2njnzWHCmp4TI8SL2MGdHIlH3elCvGR8Ldef5vwPjo9Eq3lRHSZKDM8JrziFb0tDD4AzY-D0cKrPgBSWdWUVSCOML0m0KUclDkdNW50hFQFKcRlxbwk3_9gM/s1600/8w.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUerBb544wgPIuJijBKFsS9nVxiatKuemhQ6YiPdd3QnkRGM4VRyJipcZzfhZMVUNCMbChJN23L0ES8gLB005ZUHIhyphenhyphenMTsCvBKcAd16cfJqm3fjQwCYLOvvL7X9AU0mzkqK60Y9WEvmrw/s1600/9w.png"];

var borderimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMZKzzR5pqGpcd5ouTVF80cB49RxSdFMAvyhhqcLV274PL6zelk0EgrsxF3owl2By94Iea_wH4laF7G1FUHKHKOvXUF49oxmOIr7o6pUmdPGu0HSc1ilEu1gFkxGCLXoAyih9fRmXPJNY/s1600/border.png";

var outputHtml = "<img height = '32' title = '" + totalmiles + " miles' src = '" + borderimg + "'/ >";

for (var x=0; x<digits.length-1; x++)
{
outputHtml += "<img width = '20' title = '" + totalmiles + " miles' src = '" + bdigits[digits[x]] + "'/ >";
}

outputHtml += "<img width = '20' title = '" + totalmiles + " miles' src = '" + wdigits[ digits[digits.length-1] ] + "'/ >";

outputHtml += "<img height = '32' title = '" + totalmiles + " miles' src = '" + borderimg + "'/ >";

document.getElementById("odometer").innerHTML = outputHtml;

</script>