Bi-Directional Resistance Calc

Curt Turner Sep 28, 2005

Calculates resistance from colors and colors from resistance, each with image-based output. Both color and numeric interfaces function as input and output.

Download images here!

resistance calculator

The JavaScript Source: Math Related: Bi-Directional Resistance Calc

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- THREE STEPS TO INSTALL BI-DIRECTIONAL RESISTANCE CALC:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  -->

<HEAD>

ohmStr=String.fromCharCode(937);
base10=Math.log(10);
function preLoad(){
  // preload color-band images
  arrCols=new Array();
  srcBase=document.getElementById('sel1');
  for(i=0;i<srcBase.length;i++){
    arrCols[i]=srcBase.options[i].value;
  }
  arrImg=new Array();
  for(i=0;i<arrCols.length;i++){
    for(j=0;j<3;j++){
      arrImg[i*3+j]=new Image();
      arrImg[i*3+j].src='band_'+arrCols[i]+(j+1).toString()+'.jpg';
    }
  }
  pre1=new Image();
  pre1.src='band_d3.jpg';
  pre2=new Image();
  pre2.src='band_s3.jpg';
  pre3=new Image();
  pre3.src='band_mult_s.jpg';
}
function selCol(what,band){
  // display color-band image
  eval("document.getElementById('band"+band+"').src='band_"+what.value+band+".jpg';");
}
function selTol(){
  // display tolerance band, set tolerance numeric dropdown
  document.getElementById('mult').src='band_mult_'+document.getElementById('tolerance').value+'.jpg';
  document.getElementById('tolNum').selectedIndex=document.getElementById('tolerance').selectedIndex;
  calc();
}
function tolRev(){
  // display tolerance band, set tolerance color dropdown
  document.getElementById('tolerance').selectedIndex=document.getElementById('tolNum').selectedIndex;
  document.getElementById('mult').src='band_mult_'+document.getElementById('tolerance').value+'.jpg';
  calc();
}
function calc(){
  // calculate values from color selections
  pow=document.getElementById('sel3').selectedIndex;
  if(pow==10)pow=-1; //gold
  if(pow==11)pow=-2; //silver
  //note: Multiplied resistance value by 100 (pow+2), rounded to nearest integer, then divided
  //  result by 100 to compensate for Javascript exponentiation errors (only need 2 significant digits)
  res=Math.round((document.getElementById('sel1').selectedIndex*10+document.getElementById('sel2').selectedIndex)*Math.pow(10,pow+2))/100;
  if(res>990000){
    document.getElementById('multSel').selectedIndex=2;
    res/=1000000;
  }else if(res>990){
    document.getElementById('multSel').selectedIndex=1;
    res/=1000;
  }else{
    document.getElementById('multSel').selectedIndex=0;
  }
  if(res>999){
    res=res.toString();
    res=res.substr(0,res.length-3)+','+res.substr(res.length-3,3);
  }
  tolOut=5*Math.pow(2,document.getElementById('tolerance').selectedIndex)
  document.getElementById('txtNum').value=res;
}
function calcRev(){
  // calculates color selections from numeric input
  // convert input to ohms
  document.getElementById('errSpan').innerHTML='';
  base=document.getElementById('txtNum').value;
  if(parseFloat(base).toString()=='NaN')return false;
  if(base==0)return false;
  multBy=Math.pow(1000,document.getElementById('multSel').selectedIndex);
  res=base*multBy;
  if((res>99000000000)||(res<.1)){
    inputError();
    return false;
  }
  raisedTo=Math.floor(Math.log(res)/base10);
  res=Math.round(res/Math.pow(10,raisedTo-1))/10;
  d1=Math.floor(res);
  d2=Math.round((res-d1)*10);
  if(d1==10){
    d1=1;
    d2=0;
    raisedTo+=1;
  }
  mIndex=raisedTo-1;
  if(mIndex==-1)mIndex=10;
  if(mIndex==-2)mIndex=11;
  document.getElementById('sel1').selectedIndex=d1;
  selCol(document.getElementById('sel1'),1);
  document.getElementById('sel2').selectedIndex=d2;
  selCol(document.getElementById('sel2'),2);
  document.getElementById('sel3').selectedIndex=mIndex;
  selCol(document.getElementById('sel3'),3);
}
function inputError(){
  for(i=1;i<4;i++){
    eval("document.getElementById('sel"+i+"').selectedIndex=0;");
    eval("document.getElementById('band"+i+"').src='/math-related/band_k"+i+".jpg';");
  }
  document.getElementById('errSpan').innerHTML="out of range";
}
-->
</script>
</HEAD>

<table border=0 cellpadding=0 cellspacing=0 style="border:1px solid #000000;background-color:#ffffff;" align="center" class="script2">
<tr>
<td colspan=9 style="padding:3px;background-color:#000000;color:#ffffff;">resistance calculator    <span style='color:#ff0000' id=errSpan></span></td>

</tr>
<tr>
 <td colspan=9 align=center style="padding:5px;padding-bottom:20px;background-image:url(bkgTop.gif);">
<select id=sel1 size=1 onchange="selCol(this,1);calc();">
<option value=k>black</option>
<option value=n>brown</option>
<option value=r>red</option>
<option value=o>orange</option>
<option value=y>yellow</option>
<option value=g>green</option>

<option value=b>blue</option>
<option value=v>violet</option>
<option value=a>gray</option>
<option value=w>white</option>
</select>

<select id=sel2 size=1 onchange="selCol(this,2);calc();">
<option value=k>black</option>
<option value=n>brown</option>
<option value=r>red</option>

<option value=o>orange</option>
<option value=y>yellow</option>
<option value=g>green</option>
<option value=b>blue</option>
<option value=v>violet</option>
<option value=a>gray</option>
<option value=w>white</option>
</select>

<option value=k>black</option>
<option value=n>brown</option>
<option value=r>red</option>
<option value=o>orange</option>
<option value=y>yellow</option>
<option value=g>green</option>
<option value=b>blue</option>
<option value=v>violet</option>
<option value=a>gray</option>

<option value=w>white</option>
<option value=d>gold</option>
<option value=s>silver</option>
</select>
  
<select id=tolerance size=1 onchange="selTol()">
<option value=g>gold</option>
<option value=s>silver</option>
<option value=n>none</option>
</select>

</td>
</tr>
<tr>
 <td><img src="lead_l.jpg" width=101 height=68></td>
 <td style="background-image:url(band_k1.jpg)"><img id=band1 src="band_k1.jpg" width=16 height=68></td>
 <td><img src="fill_1.jpg" width=8 height=68></td>
 <td style="background-image:url(band_k2.jpg)"><img id=band2 src="band_k2.jpg" width=12 height=68></td>
 <td><img src="fill_2.jpg" width=11 height=68></td>
 <td style="background-image:url(band_k3.jpg)"><img id=band3 src="band_k3.jpg" width=12 height=68></td>
 <td><img src="fill_3.jpg" width=16 height=68></td>

<td style="background-image:url(band_mult_n.jpg)"><img id=mult src="band_mult_g.jpg" width=10 height=68></td>
 <td><img src="lead_r.jpg" width=114 height=68></td>
</tr>
<tr>
 <td colspan=9 align=center style="padding-top:5px;padding-bottom:3px;">
<input type=text id=txtNum size=6 style="text-align:right" onkeyup='calcRev()'><select size=1 id=multSel onchange='calcRev()' class="script">
<option value=0><script>document.write(ohmStr)</script></option>
<option value=1>K<script>document.write(ohmStr)</script></option>
<option value=2>M<script>document.write(ohmStr)</script></option>

</select><select size=1 id=tolNum onchange='tolRev()'>
<option value=0>±5%</option>
<option value=1>±10%</option>
<option value=2>±20%</option>
</select>
 </td>
</tr>
</table>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

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

Bi-Directional Resistance Calc

Leave a Response

Attention JavaScript Coders

Go Deeper