Computing

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.

Apply now to guide this site

Discuss in our forum

See More About