Download Calculator

Gabrielle Gayheart Sep 19, 2007

General

This calculator estimates how long it will take to download a file using several different connection types and speeds. Easy to use and adaptable. Try it out!

Estimated File Download Times

Enter the file size of your document in the box below, then select KB, MB or GB.

File Size:

Connection Type	Estimated Time to Download
Dial-Up Access	28.8 Kb	hr.	min.	sec.
Dial-Up Access	56 Kb	hr.	min.	sec.
DSL Access Broadband Cable Access	128 Kb	hr.	min.	sec.
	256 Kb	hr.	min.	sec.
	512 Kb	hr.	min.	sec.
Wireless/Satellite Access	600 Kb	hr.	min.	sec.
Govt./Business Access High Speed Access	T1	hr.	min.	sec.
Govt./Business Access High Speed Access	T3	hr.	min.	sec.

Please note that the speed may vary due to server's capacity and set-up, current Internet traffic, the viewer's hardware or operating system, or the amount of people sharing the line (dial-up and cable) at the time of connection.

Notes

Created by: Gabrielle Gayheart

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: downloadCalc.js

/* This script and many more are available free online at The JavaScript Source!! http://www.javascriptsource.com Created by: Gabrielle Gayheart */  //create an array of whatever size you send it  function createarray(len) {   this.length = len;   for (var i = 0; i < len + 1; i++) {     this[i] = 0;   }   return this; }  // mult is either kb, mb, gb // form is the number array  function calculate(form, mult) {   // multiplier for the internet connection speeds   //to add calculations, multiply connection speed times 1,000, divide by eight; then divide by 1024   // (kbs*1000/8)/1024)   var arraysize = 8; //change this number if you add other speeds   multiplier = new createarray(arraysize);     multiplier[0] = "3.5156";     multiplier[1] = "6.8360";     multiplier[2] = "7.8125";     multiplier[3] = "31.25";     multiplier[4] = "62.5";     multiplier[5] = "73.2421";     multiplier[6] = "189.6973";     multiplier[7] = "549.3164";    //checks to see if 0 is not the value   if (form.size.value != 0) {     //does the math     for (var j = 0; j < arraysize; j++) {       var tottime = (mult * parseFloat(form.size.value)) / multiplier[j];       mod = tottime % 3600;       form[j + "h"].value= Math.floor(tottime / 3600);       form[j + "m"].value= Math.floor(mod / 60);       form[j + "s"].value= Math.floor(tottime % 60);     }   } else {     //default the result to 0     for (var k = 0; k < arraysize; k++) {       form[k+"h"].value=0;       form[k+"m"].value=0;       form[k+"s"].value=0;     }   } }

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.formCalc {width: 450px; padding: 1px 10px; margin: 20px auto; background: #EEDDCC;} .formCalcInput, .formCalcLabel {font-family: verdana, arial, sans-serif; font-size: 12px;} .formCalcInput {text-align: center;} .formCalcInput.left {text-align: left;} .formCalcInput.but {width: 200px;}  h1.heading1 {text-align: left; font-size: 1.2em; margin-bottom: -12px;} .para {text-align: left; padding: 5px; font-size: 12px;}  .mainDiv {width: 500px; margin: 0 auto; text-align: left; padding: 5px;  font-family: verdana, arial, sans-serif;}  table.tableCalc {width: 450px; margin: 0 auto; border-collapse: collapse; font-size: 12px;} table.thCalc {text-align: left; text-indent: 5px; padding: 10px 0;} table td.right {text-align: right;} table td.red {color: #990000; border-right: 5px solid #990000; padding-right: 5px;} table td.red1 {background: #CC8080;} table td.blue {color: blue; border-right: 5px solid #003399; padding-right: 5px;} table td.blue1 {background: #8099CC;} table td.green {color: green; border-right: 5px solid #336600; padding-right: 5px;} table td.green1 {background: #99B380;} table td.purple {color: purple; border-right: 5px solid #330066; padding-right: 5px;} table td.purple1 {background: #9980B3;} table td {padding: 5px 0; text-align: center;}

Head

Paste this code into the HEAD section of your HTML document.

 <script type="text/javascript" src="downloadCalc.js"></script>

Body

Paste this code into the BODY section of your HTML document

 <form class="formCalc">  <h1 class="heading1">Estimated File Download Times</h1>  <p class="para">Enter the file size of your document in the box below, then select KB, MB or GB.</p>  <div class="mainDiv">   <label class="formCalcLabel" for="size"> File Size:</label>     <input class="formCalcInput right" name="size" id="size" size="4" value="#" type="text">     <input class="formCalcInput" onclick="calculate(this.form, 1)" value="KB" type="button">     <input class="formCalcInput" onclick="calculate(this.form, 1024)" value="MB" type="button">     <input class="formCalcInput" onclick="calculate(this.form, 1048576)" value="GB" type="button">     <input class="formCalcInput but" value="Reset for another calculation" type="reset"> </div>  <table class="tableCalc">   <tbody>   <tr>     <th class="thCalc" colspan="1">Connection Type</th>     <th class="thCalc" colspan="4">Estimated Time to Download</th>   </tr>   <tr>     <td rowspan="2" class="right red">Dial-Up Access</td>     <td class="red1">28.8 Kb</td>     <td class="red1"><input class="formCalcInput" name="0h" size="4" value="0" type="text"> hr.</td>     <td class="red1"><input class="formCalcInput" name="0m" size="4" value="0" type="text"> min.</td>     <td class="red1"><input class="formCalcInput" name="0s" size="4" value="0" type="text"> sec.</td>   </tr>   <tr>     <td class="red1">56 Kb</td>     <td class="red1"><input class="formCalcInput" name="1h" size="4" value="0" type="text"> hr.</td>     <td class="red1"><input class="formCalcInput" name="1m" size="4" value="0" type="text"> min.</td>     <td class="red1"><input class="formCalcInput" name="1s" size="4" value="0" type="text"> sec.</td>   </tr>   <tr>     <td rowspan="3" class="right blue">DSL Access<br>Broadband Cable Access</td>     <td class="blue1">128 Kb</td>     <td class="blue1"><input class="formCalcInput" name="2h" size="4" value="0" type="text"> hr.</td>     <td class="blue1"><input class="formCalcInput" name="2m" size="4" value="0" type="text"> min.</td>     <td class="blue1"><input class="formCalcInput" name="2s" size="4" value="0" type="text"> sec.</td>   </tr>   <tr>     <td class="blue1">256 Kb</td>     <td class="blue1"><input class="formCalcInput" name="3h" size="4" value="0" type="text"> hr.</td>     <td class="blue1"><input class="formCalcInput" name="3m" size="4" value="0" type="text"> min.</td>     <td class="blue1"><input class="formCalcInput" name="3s" size="4" value="0" type="text"> sec.</td>   </tr>   <tr>     <td class="blue1">512 Kb</td>     <td class="blue1"><input class="formCalcInput" name="4h" size="4" value="0" type="text"> hr.</td>     <td class="blue1"><input class="formCalcInput" name="4m" size="4" value="0" type="text"> min.</td>     <td class="blue1"><input class="formCalcInput" name="4s" size="4" value="0" type="text"> sec.</td>   </tr>   <tr>     <td class="right purple">Wireless/Satellite Access</td> 	  <td class="purple1">600 Kb</td>     <td class="purple1"><input class="formCalcInput" name="5h" size="4" value="0" type="text"> hr.</td>     <td class="purple1"><input class="formCalcInput" name="5m" size="4" value="0" type="text"> min.</td>     <td class="purple1"><input class="formCalcInput" name="5s" size="4" value="0" type="text"> sec.</td>   </tr>   <tr>     <td class="right green" rowspan="2">Govt./Business Access<br>High Speed Access</td>     <td class="green1">T1</td>     <td class="green1"><input class="formCalcInput" name="6h" size="4" value="0" type="text"> hr.</td>     <td class="green1"><input class="formCalcInput" name="6m" size="4" value="0" type="text"> min.</td>     <td class="green1"><input class="formCalcInput" name="6s" size="4" value="0" type="text"> sec.</td> 	</tr>   <tr> 	  <td class="green1">T3</td>     <td class="green1"><input class="formCalcInput" name="7h" size="4" value="0" type="text"> hr.</td>     <td class="green1"><input class="formCalcInput" name="7m" size="4" value="0" type="text"> min.</td>     <td class="green1"><input class="formCalcInput" name="7s" size="4" value="0" type="text"> sec.</td>   </tr>   </tbody> </table>  <p class="para">Please note that the speed may vary due to server's capacity and set-up, current Internet traffic, the viewer's hardware or operating system, or the amount of people sharing the line (dial-up and cable) at the time of connection.</p>  </form>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details