JavaScript - Download Generator
Dieses JavaScript generiert einen Download Generator.
Autor: Gabrielle Gayheart
Demo:
JavaScript refresh Button Version 2- Code
in <head> einfügen:
<script type="text/javascript">
/*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;
}
}
}
</script>
CSS
.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;}
in <body> einfügen:
<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>
