赵工的个人空间

JS网页计算的简单示例

JavaScript可以对各种网页元素进行操控，也就是可以通过代码就能添加网页元素、删除网页元素、修改网页元素内容、修改网页元素的显示样式等，非常方便。
1. 求一个数的平方根：
计算一个数的平方根比较简单，主要是使用Math内置对象的sqrt()方法，因为要计算一个任意的大于零的整数，需要一个input输入框，并在页面显示结果值。


在上面的输入框中输入一个数值，回车后，下面就会显示出对应的平方根的值。如果输入为非数值或小于0的数，下面也会给出相应提示。
其中输入框及输出显示部分的HTML代码为：
<input type="text" id="in" placeholder="请输入所需计算的值" onchange="sqrtnum()"/><br/>
<span id="out" style="color:brown;"></span><br/>
其中，输入框input的id为in，而输出显示的span的id为out。输入框设置了placeholder属性，用于显示提示文字，并设置了onchange事件处理函数，函数定义则在JavaScript代码中。
而相应的JavaScript代码为：
function sqrtnum(){
  const sin=document.getElementById("in");
  const out=document.getElementById("out");
  let nin=Number(sin.value);
  if (isNaN(nin)) {
    out.innerText="输入不是一个可计算的数值！";
  } else {
    if (nin<0) {
      out.innerText="输入的数值必须大于等于零！";
    }else{
      out.innerText=sin.value+"的平方根为"+Math.sqrt(nin);
    }
  }
}
在上述代码中，定义了一个sqrtnum()事件处理函数，其中首先通过id获取了输入框及输出显示span对象，并分别赋值给变量。因为输入框获得的是一个字符串，因此需要使用Number()函数将输入框的value值转换为数值，然后进行相应判断。
isNaN()是个函数，用以判断一个变量是否为数值，如果为非数值则为true，为数值则为false；如果是一个数值，还需要判断是否大于等于零，只有大于等于零的数值才能计算平方根。显示结果输出使用innerText来赋值。

2. 字符串转十六进制：
字符串一般是用ASCII字符表示，可以转变为对应的十六进制码，在MCU等一些程序设计中常常需要使用这种表示方法。

在上面的左侧文本区输入一个ASCII字符串，点击后面的按钮，右侧文本区就会显示出对应每个字符的十六进制值，每个值都以0x开头并用逗号分隔。如果输入为空，右侧文本区会有相应提示。
其中输入及输出文本区及按钮的HTML代码为：
<textarea id="str" rows="3" cols="20" placeholder="请输入ASCII字符串"></textarea>
<textarea id="hex" rows="3" cols="20"></textarea>
<input type="button" value="转换" onclick="str2hex()"/><br/>
其中，输入文本区textarea的id为str，而输出文本区的id为hex。输入文本区设置了placeholder属性，用于显示提示文字，按钮设置了onclick事件处理函数，函数定义则在JavaScript代码中。
而相应的JavaScript代码为：
function str2hex(){
  const str=document.getElementById("str");
  const hex=document.getElementById("hex");
  if (str.value=='') {
    hex.placeholder="输入不能为空！";
  } else {
    let sarray=new Array(),prefix=',0x';
    for(let i = 0; i < str.value.length; i++){
      sarray[i] = str.value.charCodeAt(i).toString(16);
    }
    hex.value='0x'+sarray.join(prefix);
  }
}
在上述代码中，定义了一个str2hex()事件处理函数，其中首先通过id获取了输入文本区和输出文本区对象，并分别赋值给变量。然后判断输入文本区是否为空，为空则在输出文本区显示一个提示信息。
在输入文本区不为空时，把输入字符串中的每个字符使用charCodeAt()获取对应的ASCII字符值，这是一个十进制数值，然后使用toString(16)方法转换为对应的十六进制字符串，并顺序存入一个数组中。输出显示时，把这个数组连接成一个字符串，为了表明这是十六进制字符串，每个值都加以0x前缀并使用逗号进行分隔。

3. 两个数的四则运算：
+ - × ÷
在上面的两个输入框中分别输入两个数值，选择中间的四则运算符，然后点击右侧按钮，就可以显示出计算的结果。
其中输入框、下拉列表、按钮及输出显示部分的HTML代码为：
<input type="text" id="in1" placeholder="请输入所需计算的值"/>
<select id="method">
  <option value ="0">+</option>
  <option value ="1">-</option>
  <option value ="2">×</option>
  <option value ="3">÷</option>
</select>
<input type="text" id="in2" placeholder="请输入所需计算的值"/>
<input type="button" value="计算" onclick="calculate()"/>
<span id="result" style="color:brown;"></span><br/>
其中，两个input输入框的id分别为in1和in2，而输出显示的span的id为result，下拉列表select的id为method。对按钮设置了onclick事件处理函数，函数定义则在JavaScript代码中。
而相应的JavaScript代码为：
function calculate(){
  const sin1=document.getElementById("in1");
  if(sin1.value=='') sin1.value=0;
  const sin2=document.getElementById("in2");
  if(sin2.value=='') sin2.value=0;
  const method=document.getElementById("method");
  const result=document.getElementById("result");
  let nin1=Number(sin1.value), nin2=Number(sin2.value);
  if (isNaN(nin1)||isNaN(nin2)) {
    result.innerText="输入必须为可计算的数值！";
  } else {
    let selval=method.selectedIndex;
    switch(selval){
      case 0:
        result.innerText=sin1.value+'与'+sin2.value+'的和为：'+(nin1+nin2);
        break;
      case 1:
        result.innerText=sin1.value+'减去'+sin2.value+'的差为：'+(nin1-nin2);
        break;
      case 2:
        result.innerText=sin1.value+'与'+sin2.value+'的积为：'+(nin1*nin2);
        break;
      case 3:
        result.innerText=sin1.value+'除以'+sin2.value+'的商为：'+(nin1/nin2);
        break;
    }
  }
}
在上述代码中，定义了一个calculate()事件处理函数，其中首先通过id获取了两个输入框、一个下拉列表及输出显示span的对象，并分别赋值给变量。如果输入为空，则赋值输入为0。
下面则把输入转换为数值，并通过isNaN()函数判断输入是否为可计算的数。如果输入皆为数值，通过下拉列表的selectedIndex判断是哪个计算被选中，然后使用switch分支语句分别根据对应项进行相应的四则运算，把结果在输出span中显示出来。

4. 摄氏度与华氏度：
温度有摄氏度与华氏度两种常见的计量标准，西方很多国家习惯使用华氏度，因此有时需要进行转换。
摄氏转华氏 华氏转摄氏
首先要在单选按钮中选择所需计算，然后在输入框中输入一个数值，回车后，后面就会显示出对应的计算值。如果输入为非数值也会给出相应提示。
其中单选按钮、输入框及输出显示的HTML代码为：
<input type="radio" name="radiosel" checked="checked" value="0"/>摄氏转华氏
<input type="radio" name="radiosel" value="1"/>华氏转摄氏
<input type="text" id="temp" placeholder="请输入温度值" onchange="tempcal()"/>
<span id="res" style="color:brown;"></span><br/>
其中，两个type为radio的input元素，name都为radiosel，但有不同的value值和显示文本，它们代表两个单选按钮，用于选择转换计算。type为text的输入框id为temp，用于输入温度值，并定义了oninput事件处理函数；而输出显示的span的id为res。
而相应的JavaScript代码为：
function tempcal(){
  const stemp=document.getElementById("temp");
  const res=document.getElementById("res");
  const radiosel = document.getElementsByName('radiosel');
  let ntemp=Number(stemp.value);
  if (isNaN(ntemp)) {
    res.innerText="输入不是一个可计算的数值！";
  } else {
    let radioval=0;
    if (radiosel[1].checked) radioval=1;
    if (radioval==0) {
      res.innerText="摄氏温度"+stemp.value+"转为华氏度为："+(ntemp*1.8+32);
    }else{
      res.innerText="华氏温度"+stemp.value+"转为摄氏度为："+((ntemp-32)/1.8);
    }
  }
}
在上述代码中，定义了一个tempcal()事件处理函数，其中首先也是通过id获取了输入框、输出显示span的对象，并分别赋值给变量。而单选按钮要使用getElementsByName('radiosel')获取对象，这是一个对象数组，也要赋给一个变量。
因为只有两个单选按钮，所以后续处理比较简单，只有两个分支，默认radiosel[0]被选取，因此radioval设为0。然后判断是否radiosel[1].checked为true，也就是radiosel[1]被选取，这时要设radioval为1。后面就是根据radioval取值的分支处理。

5. 三角函数计算：
三角函数计算也是很常用的，一般习惯使用角度，但JavaScript的三角函数计算使用弧度，因此角度值要先进行转换，然后再进行计算。
正弦sin 余弦cos 正切tan 正割sec 余割csc 余切cot

上面示例中使用了多选框，选择其中某一项，结果中就会包括其对应值，都不选只输出弧度值。包括输入框、多选框和输出显示的HTML代码为：
<input type="text" id="degree" placeholder="请输入所需计算的角度值" onchange="trigonometric()"/>
<input type="checkbox" name="checksel" value="0"/>正弦sin
<input type="checkbox" name="checksel" value="1" />余弦cos
<input type="checkbox" name="checksel" value="2" />正切tan
<input type="checkbox" name="checksel" value="3"/>正割sec
<input type="checkbox" name="checksel" value="4" />余割csc
<input type="checkbox" name="checksel" value="5" />余切cot<br/>
<span id="val" style="color:brown;"></span><br/>
其中的多选框包括六个选项，使用type为checkbox的input元素组成，其name都为checksel，但具有不同的value值和显示文本。多选框默认情况下都不选。事件处理函数定义为角度值的文本输入框的onchange事件。
而相应的JavaScript代码为：
function trigonometric(){
  const sdegree=document.getElementById("degree");
  const val=document.getElementById("val");
  const checksel = document.getElementsByName('checksel');
  let degree=Number(sdegree.value);
  if (isNaN(degree)) {
    val.innerText="输入必须为可计算的数值！";
  } else {
    let radian=degree*Math.PI/180;
    let res="弧度值为："+radian+"<br/>";
    if (checksel[0].checked) res+="正弦值为："+Math.sin(radian)+"<br/>";
    if (checksel[1].checked) res+="余弦值为："+Math.cos(radian)+"<br/>";
    if (checksel[2].checked) res+="正切值为："+Math.tan(radian)+"<br/>";
    if (checksel[3].checked) res+="正割值为："+1/Math.cos(radian)+"<br/>";
    if (checksel[4].checked) res+="余割值为："+1/Math.sin(radian)+"<br/>";
    if (checksel[5].checked) res+="余切值为："+1/Math.tan(radian)+"<br/>";
    val.innerHTML=res;
  }
}
代码中，多选框也是使用getElementsByName()获取对象，并赋给一个变量，这是一个对象数组。然后对数组中的每一项的checked属性进行判断，如果对应值为true表示此项被选中，就会在显示字符串后添加对应的一条内容。
为了使显示内容清晰，每一项都占据一行，也就是在每条显示后面都要加上"<br/>"，这样的字符串就不再是纯文本，只能使用innerHTML来输出，而不能使用innerText。

6. 数的幂：


JavaScript的Math.pow()方法可以计算小数幂次和负数幂次，功能比较强大。为了使用这个方法，需要两个输入文本框，分别输入底数和幂次，还需要一个按钮和输出显示span，HTML代码为：
<input type="text" id="num" placeholder="请输入幂的底数"/><input type="text" id="pow" placeholder="请输入幂次"/><input type="button" value="计算" onclick="cal()"/><br/>
<span id="powres" style="color:brown;"></span><br/>
对应的JavaScript代码为：
function cal(){
  const snum=document.getElementById("num");
  if(snum.value=='') snum.value=0;
  const spow=document.getElementById("pow");
  if(spow.value=='') spow.value=0;
  const res=document.getElementById("powres");
  let num=Number(snum.value), pow=Number(spow.value);
  if (isNaN(num)||isNaN(pow)) {
    res.innerText="输入必须为可计算的数值！";
  } else {
    res.innerHTML=snum.value+"<sup>"+spow.value+"</sup>="+Math.pow(num,pow)
  }
}
代码中，使用了Math.pow(num,pow)方法来进行计算，为了使显示结果清晰，使用了上标标记<sup>，输出也只能使用innerHTML来进行显示。