See More About:

Distance Calculator with Times

2. Get the Code

Join the Discussion

Questions? Comments?

More of this Feature

Introduction Modify the Code Miles and Kilometres

To insert the time/distance calculator into your page the first thing you need to do is to put the following HTML into the body of your page where you want the calculator to appear. (You can modify the text descriptions of the fields if you like).

You also need to add a small piece of HTML into the head of your page that will link the Javascript into the page so that the calculator will function.

Next, copy the following Javascript code and save it in a file called dist.js (which you have just linked into your page. Don't worry about the fact that the cities in the array are not the ones you want - we'll fix that afterwards).

var dist = [
['Bricktown', [], []],
['Will Rogers Airport', [10], [15]],
['Bethany', [11,14], [18,21]],
['Edmond', [14,23,18], [19,30,26]],
['El Reno', [28,27,24,40], [31,33,31,44]],
['Midwest City', [8,17,18,21,35], [13,23,26,26,40]],
['Moore', [10,12,20,23,37,15], [14,18,28,30,42,21]],
['Nichols Hills', [8,15,7,10,32,15,18], [14,22,17,16,39,22,24]],
['Warr Acres', [11,13,1,16,26,17,20,6], [16,19,3,23,34,24,27,14]],
['Yukon', [21,21,12,28,13,28,31,25,13], [23,25,20,34,17,31,34,30,22]],
['OKC Capitol', [3,14,11,12,32,9,12,6,10,20], [5,18,18,17,35,13,15,11,15,23]]
];

// Distance Calculator with Times
// copyright 27th April 2006, by Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
function reverse(a, b){if (a>b) return -1;if (a <b) return 1;return 0;}function setOptions(id) {var selbox = document.getElementById(id);selbox.options.length = 0;var ct = []; for (var i = dist.length - 1; i >= 0; i--) {ct[i] = dist[i][0]+','+i;} ct.sort(reverse); for (var i = dist.length - 1; i >= 0; i--) {var c = ct[i].split(','); selbox.options[selbox.options.length] = new Option(c[0],c[1]);}}function calc() {var v1 = document.getElementById('ca').value;var v2 =  document.getElementById('cb').value;var dst = 0;if (v1 != v2) {dst =dist[Math.max(v1,v2)][1][Math.min(v1,v2)];tme = dist[Math.max(v1,v2)][2][Math.min(v1,v2)];}
// change the following line to allow both miles and km if required
document.getElementById('m').value = dst;
document.getElementById('t').value = tme;}function start() {setOptions('ca');setOptions('cb');}window.onload=start;

All that remains now is to modify the time/distance array so that it contains the cities you want along with the correct distances and times between them.

Guide since 2004

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

JavaScript