Phiên bản đầy đủ: jsB@nk » Tính toán » Bảng nhiệt độ
URL: https://www.javascriptbank.com/temperature-table-generator.html
Hiệu ứng tạo một bảng đối chiếu nhiệt độ giữa độ °F và °C.
Phiên bản đầy đủ: jsB@nk » Tính toán » Bảng nhiệt độ
URL: https://www.javascriptbank.com/temperature-table-generator.html
<style type="text/css">body{background-color:white;font-family:verdana;font-size:9pt;color:black;padding:5 40 0 40;}td{font-size:8pt;font-family:verdana;}.examples{border-width:2px;border-style:outset;padding:10px;background-color:#ffedcf;}.code{border-width:2px;border-style:outset;padding:10px;background-color:#9FDAFF;font-family:courier;font-size:8pt;}.spacer{padding:0 50 0 50;}.spacerC{padding:0 120 0 120;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">var ns4=(document.layers)?true:false;var ie4=(document.all || document.getElementById)?true:false;function updateTemp(){if(ns4)alert('This part of the script not supported in Netscape 4.x');else{var tEl=(ie4)?document.all['tel']:document.getElementById('tel');var d=document.forms["exfive"];tEl.innerHTML=writeRowTempF(eval(d.fstart.value),eval(d.fend.value),eval(d.fsteps.value),eval(d.fprec.value));}}</script><script language="javascript">// TEMPERATURE CONVERSION TABLE - V 1.0// AUTHOR: Brian Gosselinfunction roundFill(n,p){ //FUNCTION TO ROUND n TO THE pth DECIMAL PLACE AND ADD TRAILING ZEROSp=Math.min(p,10);var ip=n+='';if(ip.indexOf('.')!=-1)ip=ip.substring(0,ip.indexOf('.'));var fp=parseFloat((n.indexOf('.')!=-1)?n.substr(n.indexOf('.'),n.length):'0.0');fp=(Math.round(fp*Math.pow(10,p))/Math.pow(10,p))+'';if(fp.indexOf('.')==-1)fp+='.0';fp=fp.substr(fp.indexOf('.')+1,fp.length);if(p!=0){while(fp.length<p)fp+='0';}return ip+((p!=0)?'.'+fp:'');}function writeRowTempC(startC,endC,degStep,precision){var t='<table cellpadding=2 cellspacing=0 border=1>';t+='<tr valign="middle" align="right"><td nowrap><b>°C</b></td>';for(i=startC;i<=endC;i+=degStep)t+='<td>'+roundFill(i,precision)+'</td>'; //CELCIUSt+='</tr>';t+='<tr valign="middle" align="right"><td nowrap><b>°F</b></td>';for(i=startC;i<=endC;i+=degStep)t+='<td>'+roundFill(i*1.8+32,precision)+'</td>'; //FAHRENHEIT=(CELCIUS*1.8)+32t+='</tr>';t+='</table>';return t;}function writeColTempC(startC,endC,degStep,precision){var t='<table cellpadding=2 cellspacing=0 border=1>';t+='<tr valign="middle" align="center"><td width=50%><b>°C</b></td><td><b>°F</b></td></tr>';for(i=startC;i<=endC;i+=degStep)t+='<tr valign="middle" align="right"><td>'+roundFill(i,precision)+'</td><td>'+roundFill(i*1.8+32,precision)+'</td></tr>';t+='</table>';return t;}function writeRowTempF(startF,endF,degStep,precision){var t='<table cellpadding=2 cellspacing=0 border=1>';t+='<tr valign="middle" align="right"><td nowrap><b>°F</b></td>';for(i=startF;i<=endF;i+=degStep)t+='<td>'+roundFill(i,precision)+'</td>'; //FAHRENHEITt+='</tr>';t+='<tr valign="middle" align="right"><td nowrap><b>°C</b></td>';for(i=startF;i<=endF;i+=degStep)t+='<td>'+roundFill((i-32)/1.8,precision)+'</td>'; //CELCIUS=(F-32)/1.8t+='</tr>';t+='</table>';return t;}function writeColTempF(startF,endF,degStep,precision){var t='<table cellpadding=2 cellspacing=0 border=1>';t+='<tr valign="middle" align="center"><td width=50%><b>°F</b></td><td><b>°C</b></td></tr>';for(i=startF;i<=endF;i+=degStep)t+='<tr valign="middle" align="right"><td>'+roundFill(i,precision)+'</td><td>'+roundFill(((i-32)/1.8),precision)+'</td></tr>';t+='</table>';return t;}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div class="spacer"><div class="examples"><h3>Temperature Table 1: <font size="-1">From 0°C to 34&degC in 2 degree increments with 2 digit precision.</font></h3><script language="javascript">document.write(writeRowTempC(0,34,2,2));</script><br><br><h3>Temperature Table 2: <font size="-1">From 32°F to 90°F in 3 degree increments with 1 digit precision.</font></h3><script language="javascript">document.write(writeRowTempF(32,90,3,1));</script><br></div></div></center><br><br>The code used to create table #1 looks like this:<br><br><div class="spacerC"><div class="code"><script language="javascript"><br>document.write(writeRowTempC(0,34,2,2));<br></script></div></div><br><br>The code used to create table #2 looks like this:<br><br><div class="spacerC"><div class="code"><script language="javascript"><br>document.write(writeRowTempF(32,90,3,1));<br></script></div></div><br><br><hr><br><br>The script also allows you to create the tables in column form as well. See the two examples below.<br><br><center><div class="spacer"><div class="examples"><table cellpadding=0 cellspacing=10 border=0 width="70%"><tr align="center"><td><h3>Temperature Table 3<br><font size="-1">From 20°C to 40&degC in 2 degree increments with 2 digit precision.</font></h3><script language="javascript">document.write(writeColTempC(20,40,2,2));</script></td><td><h3>Temperature Table 4<br><font size="-1">From 30°F to 80°F in 5 degree increments with 3 digit precision.</font></h3><script language="javascript">document.write(writeColTempF(30,80,5,3));</script></td></tr></table></div></div></center><br><br>The code used to create table #3 looks like this:<br><br><div class="spacerC"><div class="code"><script language="javascript"><br>document.write(writeColTempC(20,40,2,2));<br></script></div></div><br><br>The code used to create table #4 looks like this:<br><br><div class="spacerC"><div class="code"><script language="javascript"><br>document.write(writeColTempF(30,80,5,3));<br></script></div></div><br><br><hr><br><br>As you can see, it isn't very difficult to use the scripts.<br><br>If you know a little about Javascript, you can see the functions simply return a string containing the generated HTML code. So, you can use it like I have above, or you can get a bit fancier and make the tables dynamic. See the example below.<br><br>Note: I did not "bullet-proof" this part by checking for proper user input. So, if you enter garbage data, you'll get an error. And, this part of the script will not work in Netscape prior to v6.0:<br><br><!--*******************BEGIN DYNAMIC TABLE*******************--><form name="exfive"><div class="spacer"><div class="examples"><center><table cellpadding=0 cellspacing=10 border=0><tr align="center"><td colspan="4"><b><font size="+1">Convert °F to °C</font><b></td></tr><tr align="center" valign="bottom"><td>Enter starting<br>Temperature<br><br><input type="text" value="32" name="fstart" size="5"></td><td>Enter ending<br>Temperature<br><br><input type="text" value="80" name="fend" size="5"></td><td>Enter degree<br>increments<br><br><input type="text" value="5" name="fsteps" size="5"></td><td>Enter digit<br>precision<br><br><input type="text" value="1" name="fprec" size="5"></td></tr><tr align="center"><td colspan=4><input type="button" value=" Create Table " onclick="updateTemp()"></td></tr></table><br><div id="tel">(Enter some values above and click the button.)</div></center><br></div></div></form><!--*****************END DYNAMIC TABLE*****************--><br><br>The script to accomplish the above is a bit more detailed; you can view the source of this page if you are really interested.<br><br><hr><br><br>Incidentally, there is another function that you may find useful called <b>roundFill( <i>n</i> , <i>p</i> )</b>. It accepts two arguments: the number to round (<b><i>n</i></b>) and the precision value (<b><i>p</i></b>).<br><br>The function will round the fractional part of the number to the precision value. It also adds necessary zeros to the end of the number to force the level of precision you specified. So, even if a number has no fractional part, it will add zeros after the decimal point as necessary.<br><br><br><br><br><h2>Instructions:</h2><hr><form name="SAf"><br>To make the script work, you'll need the functions that create the tables. Where you put the code to actually write them out is up to you. Look at the code for examples 1 to 4 for help on that.<br><br>Recap: There are 4 functions you can use to make the tables:<br><ul><li><b>writeRowTempC(<i>start , end , increment , precision</i>)</b> - Uses °C values as the start and end points. Makes a horizontal table.<br><br><li><b>writeColTempC(<i>start , end , increment , precision</i>)</b> - Uses °F values as the start and end points. Makes a vertical table.<br><br><li><b>writeRowTempF(<i>start , end , increment , precision</i>)</b> - Uses °C values as the start and end points. Makes a horizontal table.<br><br><li><b>writeColTempF(<i>start , end , increment , precision</i>)</b> - Uses °F values as the start and end points. Makes a vertical table.<br></ul>Then, there's the <b>roundFill()</b> function I talked about earlier, which the four functions above use.<!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->